Skip to main content

Bug Tracker

Side navigation

#2205 closed enhancement (fixed)

Opened January 21, 2008 10:01PM UTC

Closed June 10, 2009 08:58AM UTC

[validate] Add a class to the input field

Reported by: ericw Owned by: joern
Priority: minor Milestone:
Component: plugin Version:
Keywords: validate Cc: eric@soundcloud.com
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"
          }
        }
      });


Attachments (0)
Change History (5)

Changed January 22, 2008 01:20PM UTC by joern comment:1

need: ReviewPatch
owner: → joern

Changed February 12, 2008 07:39PM UTC by joern comment:2

type: bugenhancement

Changed February 12, 2008 07:40PM UTC by joern comment:3

Scheduled for 1.3.

Changed September 18, 2008 07:56PM UTC by James Vivian comment:4

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.

Changed June 10, 2009 08:58AM UTC by joern comment:5

resolution: → fixed
status: newclosed

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