• Please post questions to the jQuery discussion list, putting (validate) into the subject of your post, making it easier to spot it and respond quickly.
• Please post bug reports and other contributions (enhancements, features, eg. new validation methods) to the jQuery bug tracker (requires registration). Please put [validate] into the title of a ticket.

All answers below will assume the 1.2 release, please upgrade if you haven’t already.

@Olin: You can manually validate a form using the valid() on the form, as long as you init the validation before that. Give this a try:

$("#myform").validate();
$("img.submit").click(function() {
  if ($("#myform").valid() ) {
    // do something cool when the form is valid
  }
});

@David: The validation 1.2 creates only a single validator for a given form, no matter how often you call validate(). That should fix the basic problem you describe.

@Erick: You should implement your own custom method which checks for whitespace in the filename. See $.validator.addMethod for details.

@Howa: Enhancing error messages with animations is something I’ll try to tackle in 1.3, among other issue in that area. Animations work only on block elements, so the form layout must be optimized to support animations.

@gabe: Yes, and there is an example showing how to implement it. See the dynamic inputs example. In that case it checks that a group of field doesn’t sum up over a certain total value.

@Laurent: Right, either customize error placement, or place the label in the form beforehand. You can hide it via CSS and the validation plugin picks it up and displays it.

For “array notation” you need to use quotes, eg. “bla[]“: “required”.

@zeek: 1.2 features a complete overhaul of the email method, as well as the URL method.

@Sheldon: Displaying messages outside the form (still) isn’t supported. “Finding” error elements depends on field-names, which are only unique inside a given form. I’ll try to tackle that in 1.3.

For displaying general messages you should use the errorContainer option of the validate method.

@robert: There are problems with tabs, right, I haven’t yet tried to tackle them, but will in 1.3.

@Marvin: Validating dynamic elements is very easy in 1.2, you just need to find a neat way to create the elements and add them to the form, everything else works out-of-the-box. See the dynamic inputs example.

@palPalani: The provided date validations are not capable of doing that, you’d have to implement your own birth-date-validation. The dateJS library may be helpful for that.

@John: Nope, title doesn’t support multiple entries. Functions in the class attribute should work as long as you escape quotes properly. class=”{bblabl:”flafl”}” won’t work. Use single quotes instead: class=”{blaba:’flfa’}”.

@Marcos Aurélio: Please give the remote validation in 1.2 a try. Its now complete and tested.

@Robert: The regexes for email and url are completely replaced in 1.2.

@Andreas R: Fixed!

@mykle: Drupal 6 includes jQuery 1.2.x, so once that is available… The validation 1.2 release doesn’t require the metadata plugin anymore for inline-rules, but requires 1.2.2+ nonetheless. Keeping compability with older version isn’t worth it from my perspective, sooner or later everyone should be able to upgrade to current jQuery versions.

@Vishal: Doing animations only on blur isn’t possible yet. I’m going to work on better support for animations in 1.3.

@chadi: Currently you’ve got to check for existance of the form before calling validate. As long as you call that when the form actually exists everything should work fine.

@Adisonz: The 1.2 release contains a lot of improvements to support dynamic forms. Please give it a try.

@Jamie Jensen: The easiest approach would be to place the designated error message element in the form and hide it via CSS. The validation plugin will look for the element and show it accordingly.

@Felix: Remote validation is now stable. Did you take a look at the ajaxSubmit-demo?

@Peter: True, that is a flaw in the validation plugin. That validate method breaks the usual plugin model in other aspects, too. I’m planning to fix these in the 2.0 release, which will break a lot of compability while cleaning up a lot of mistakes of the past. Until then you’ve got to make sure that the form exists before calling validate.

@Leigh Dodds: Please give the 1.2 release a try, it contains a lot of improvements for dynamic forms. The refresh() method is gone as there is no need to call it anymore.

@SubOne: For the validation to work you’d have to change the name of the cloned fields. I’ll try to figure out a way to validate fields with xxx[] names, as that is too common in PHP land.

@Eric Wahlforss: The second issue is easy to resolve by using the success-option, please take a look at the docs for validate(). That’ll work for remote checks, too.

The first issue was a bug, thanks for reporting. The fix is included in the final 1.2 release.

@SubOne: That change looks like it supresses the symptom, but doesn’t actually fixes the issue. Could you provide some feedback about the actual issue, eg. a testpage?

if ( !this.depend(param, element) )
changed to:
if ( !this.depend || !this.depend(param, element) )

I was getting an error that this.depend was not a function and it was making the rest of the validation fail.

cheers // eric

I’ve run into two glitches this far:

1) Every now and then the form submit button won’t work although all fields in the form are valid, this happens a lot when I use ajax fields (that check for unique email/username, etc).

2) I’ve tried to make small script for highlighting fields (displaying a checkbox mark as user feedback) for valid fields. It looks something like this:

var username = $(“#user_username”);
username.blur(function(){
if (validator.element(username)) {
username.addClass(‘valid’);
}
});

Unfortunately the validator.element function returns undefined every now and then, so I cannot really use this. Is there another way of doing this? What I basically want to do is assign a “valid” class on blur to form fields that are valid.

Here’s my form code:
http://pastie.caboo.se/140481

Thanks for a great plugin! // eric


<form id="reg1Form" class="pretty" method="post" action="">
<fieldset id="badge">
<legend>Your Registration Information</legend>
<ol>
<li>
<label for="register_name[]" class="required">Full Name:</label>
<input type="text" name="register_name[]" class="medium" maxlength="32" />
<span class="tip">First then last (e.g. John Doe)</span>
</li>
</ol>
</fieldset>
<input type="button" id="register_add_guest" name="register_add_guest" onclick="addGuest();" class="addguest" value="Add Guest">
<input type="submit" name="register_submit" class="nextstep" value="Next Step">
</form>


Now validation works fine at this point until I click “Add Guest”, which closes the “badge” fieldset and inserts it before the buttons. After the clone I have this in the code:


<form id="reg1Form" class="pretty" method="post" action="">
<fieldset id="badge">
<legend>Your Registration Information</legend>
<ol>
<li>
<label for="register_name[]" class="required">Full Name:</label>
<input type="text" name="register_name[]" class="medium" maxlength="32" />
<span class="tip">First then last (e.g. John Doe)</span>
</li>
</ol>
</fieldset>
<fieldset id="badge1">
<legend>Guest #1 Registration Information</legend>
<ol>
<li>
<label for="register_name[]" class="required">Full Name:</label>
<input type="text" name="register_name[]" class="medium" maxlength="32" />
<span class="tip">First then last (e.g. John Doe)</span>
</li>
</ol>
</fieldset>
<input type="button" id="register_add_guest" name="register_add_guest" onclick="addGuest();" class="addguest" value="Add Guest">
<input type="submit" name="register_submit" class="nextstep" value="Next Step">
</form>


But now the first fieldset is the only one being validated. The user can click “Add Guest” as many times as they want as well as remove individual fieldsets if they decide they no longer need them. However, I can’t get the form to validate the dynamically added fields.

Any help with this would be greatly appreciated.

I’m trying to work out how to apply validation to a form that allows users to dynamically add and remove elements. To achieve this I’m just using the JQuery clone method.

The fields added to the form are “required”, but the validation doesn’t seem to want to apply to the newly added fields. In fact it seems to be validating the originally cloned field instead.

Looking at the comments on this page I think I need to be using the refresh() method but this isn’t documented, and seems to have been removed from the most recent code: the dynamic totals example doesn’t seem to use it either.

Is there some documentation or a simple example of this somewhere?

original…
<code>cc_state: {
required: function() {
return ($j(‘div#billing_cc’).css(‘display’) != ‘none’);{
required: function() {
return $j(“#cc_state”).val() !== ‘Select a State’;
}
},</code>

changed and working …

<code>cc_state: {
required: function() {
return ($j(‘div#billing_cc’).css(‘display’) != ‘none’); {
required: function() {
return $j(“#cc_state”).val() !== ‘Select a State’;
}
}
}
},</code>

The validation problem in my second question was caused by improper placement of the function? The required portion of the validation process.

I had …
cc_state: {
required: function() {
return ($j('div#billing_cc').css('display') != 'none');
}
required: function() {
return $j("#cc_state").val() !== 'Select a State';
}
},

Which cause the required component of the field to always be checked.

I changed it to …
cc_state: {
required: function() {
return ($j('div#billing_cc').css('display') != 'none');
}
required: function() {
return $j("#cc_state").val() !== 'Select a State';
}
},

and it worked properly.

I am checking 9 fields, is there a better way to make my code block a bit smalled and more efficient?

Thanks,

Jamie Jensen