The following are all acceptable methods for declaring validation rules for the jQuery Validation plugin.
1) Declared within .validate()
Use this when you’re trying to keep your JavaScript separate from your HTML markup.
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('#myform').validate({ rules: { fieldName: { required: true } } }); }); |
DEMO: http://jsfiddle.net/uTt2X/2/
NOTE: If your field name
contains special characters such as brackets or dots, you must enclose the name
in quotes…
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('#myform').validate({ rules: { "field.Name[234]": { required: true } } }); }); |
—–
2) Declared by class
:
Only use this when your rules can be declared by a boolean true
as you cannot pass any parameters.
1 |
<input name="fieldName" class="required" /> |
DEMO: http://jsfiddle.net/uTt2X/1/
—–
3) Declared by HTML5 validation attributes:
Use this if you already have HTML 5 validation attributes within your form. Only use this when your rules can be declared with HTML 5 validation attributes. Not all rules can be declared in this fashion.
1 |
<input name="fieldName" required="required" /> |
DEMO: http://jsfiddle.net/uTt2X/
—–
4) Declared using the .rules()
method:
You must use this method if you’re dynamically creating form elements.
1 2 3 |
$('input[name="fieldName"]').rules('add', { required: true }); |
DEMO: http://jsfiddle.net/uTt2X/3/
However, as per the documentation, this method only applies to the first matched element. The solution is then to wrap it within a jQuery .each()
for assigning rules to many inputs at once.
1 2 3 4 5 |
$('.myclass').each(function() { $(this).rules('add', { required: true }); }); |
DEMO: http://jsfiddle.net/uTt2X/8/
—–
5) By assigning one or more rules to your own class
using the .addClassRules()
method:
Use this for assigning rules to fields by their class or for creating an arbitrary class
representing the rule. Great for creating “compound” rules. Compound rules are rules that are composed of two or more standard rules, like required
and email
.
1 2 3 4 |
$.validator.addClassRules("myClass", { required: true, email: true }); |
Then apply to your HTML:
1 |
<input name="fieldName" class="myClass" /> |