Bug Tracker

Opened 12 years ago

Closed 11 years ago

#2205 closed enhancement (fixed)

[validate] Add a class to the input field

Reported by: ericw Owned by: joern
Priority: minor Milestone:
Component: plugin Version:
Keywords: validate Cc: eric@…
Blocked by: Blocking:

Description

I've just ported our forms to the new jquery validate 1.2. It works great but it seems overly complicated to add a class of "valid" to a field when a field is validated and the result is succesful. Behaviour when simply adding success : "valid" seems a bit dodgy. When doing that, the label and not the field itself gets the valid class. But if a field that previously had an error gets corrected (so that it is valid), the class names for the label contains both "valid" and "error" (when it should probably only be valid). I'm running a solution for this (that is working pretty well, except for a minor glitch with remotely validated fields), but it would be nice if we could remove this code and just use success : "valid" instead.

      $('#signup-form').validate({
        success: function(label) {
          label.prev('input').addClass("valid");
        },
        highlight: function(element, errorClass) {
$(element).removeClass("valid").removeClass("error").addClass("error");
        },
        unhighlight: function(element, errorClass) {
          $(element).addClass("valid").removeClass("error");
        },
        rules: {
          "user[username]": {
            required: true,
            rangelength: [3,25],
            remote: "/users/unique_username"
          },
          "user[password]": {
            required: true,
            rangelength: [4, 50]
          },
          "user[first_name]": {
            required: true
          },
          "user[password_confirmation]": {
            required: true,
            rangelength: [4,50],
            equalTo: "#user_password"
          },
          "user[email]": {
            required: true,
            email: true,
            rangelength: [3,100],
            remote: "/users/unique_email"
          }
        },
        messages: {
          "user[username]": {
            required: "Please enter a username",
            rangelength: $.format("Your username should have between {0} and {1} characters"),
            remote: $.format("Sorry, {0} is already registered as a user")
          },   			  
          "user[password]": {
            required: "Please provide a valid password",
            rangelength: $.format("Your password should have between {0} and {1} characters")
          },
          "user[password_confirmation]": {
            required: "Please repeat your password",
            rangelength: $.format("Your password should have between {0} and {1} characters"),
            equalTo: "Oops, that's not the same password as to the left"
          },
          "user[email]": {
            required: "Please enter an e-mail address",
            remote: $.format("Sorry, {0} is already registered with another account"),
            rangelength: $.format("Your e-mail should have between {0} and {1} characters"),
            email: "Please enter a valid e-mail address"
          }
        }
      });


Change History (5)

comment:1 Changed 12 years ago by joern

need: ReviewPatch
Owner: set to joern

comment:2 Changed 12 years ago by joern

Type: bugenhancement

comment:3 Changed 12 years ago by joern

Scheduled for 1.3.

comment:4 Changed 11 years ago by James Vivian

I ran into this issue too and got around the UI display with CSS specificity.

Here's the validation-specific code I used in success:

label.parent().find("[name='" + label.attr('for') + "']").add(label).addClass('valid');

The valid class could probably be made a setting, and the scope of the jQuery collection could be the form itself.

comment:5 Changed 11 years ago by joern

Resolution: fixed
Status: newclosed

Fixed in r6382; a class "valid" is now added to valid elements, via unhighlight, and removed in highlight.

Note: See TracTickets for help on using tickets.