[validate] Add a class to the input field

[ericw]

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"
          }
        }
      });

[joern]

Scheduled for 1.3.

[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.

[joern]

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