Opened 14 years ago
Closed 13 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: | [email protected]… |
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 14 years ago by
need: | Review → Patch |
---|---|
Owner: | set to joern |
comment:2 Changed 14 years ago by
Type: | bug → enhancement |
---|
comment:3 Changed 14 years ago by
comment:4 Changed 14 years ago by
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 13 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
Fixed in r6382; a class "valid" is now added to valid elements, via unhighlight, and removed in highlight.
Scheduled for 1.3.