The various ways to declare your jQuery Validate rules

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.

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

—–

2) Declared by class:

Only use this when your rules can be declared by a boolean true as you cannot pass any parameters.

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.

DEMO: http://jsfiddle.net/uTt2X/

—–

4) Declared using the .rules() method:

You must use this method if you’re dynamically creating form elements.

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.

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.

Then apply to your HTML:

DEMO: http://jsfiddle.net/uTt2X/4/

jQuery Validate plugin requires a name attribute

Remember that no matter how you declare your rules when using jQuery Validate, even if you target by id and declare with the .rules('add') method, you must absolutely have a name attribute on any form element you wish to validate.

<input name="firstName" type="text" ...

See the Markup recommendations section of the Reference docs page:

“The name attribute is ‘required’ for input elements, the validation plugin doesn’t work without it.”

Why? The name attribute is how the jQuery Validate plugin keeps track of the inputs internally. Even though the documentation doesn’t specify it, it only stands to reason that if this is how the plugin is keeping track of everything, you must make sure each name is unique.