Declaring jQuery Validate plugin rules -- attribute vs. class vs. code

Question

In the examples for the jQuery Validate plugin, I see three different approaches to declaring validation rules:

CSS Classes -- e.g. <input type="text" name="whatever" class="required" />
Attributes -- e.g. <input type="text" name="whatever" required />
JS code -- e.g. $("#myForm").validate({ rules: { whatever: "required", ... } });

But I don't see anywhere in the docs that explains why you'd use one over the other. Nor do I see an explanation of how to use the validation methods with each approach (for example, how would you use the "max( value )" method with a tag attribute or a css class?).

What are the tradeoffs between these three approaches? And how exactly do you declare all the different validation methods using each approach?

Whatever is easiest for you to understand and maintain. The answer totally depends on your specific situation. How many fields, how many unique sets of rules, dynamically created fields, etc. etc. I typically like specifying the rules within my JS. Then when I created a gigantic form, I instead specified them using `classes` within the HTML. My recommendation would be to follow the code [in the examples](http://jquery.bassistance.de/validate/demo/), and post a more specific question when you get stuck. — Sparky, Jan 03 '13 at 19:51
Possible dupe: http://stackoverflow.com/questions/14375707/should-i-implement-my-validation-using-the-built-in-class-or-the-rule — Sparky, Jan 22 '13 at 21:58

score 39 · Answer 1 · edited Dec 14 '16 at 17:21

39

You can apply rules trough data-rule attributes. This is the easiest way and possibly the best way to maintain a clean code...

Example:

<form id="myform">
    <input type="text" name="email" data-rule-required="true" data-rule-email="true">    
    <input type="text" name="password" id="password" data-rule-required="true" data-rule-minlength="6">
    <input type="text" name="password-confirm" data-rule-required="true" data-rule-minlength="6" data-rule-equalto="#password">
</form>

You can even provide messages through data attributes:

<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address" />

In JavaScript just call:

$('#myform').validate();

edited Dec 14 '16 at 17:21

Sean Kendle

3,538
1
27
34

answered Mar 30 '13 at 11:06

Primoz Rome

10,379
17
76
108

3

It's worth noting that the 'data-rule-' markup feature is only available in jquery.validate v1.10 and above. – James McCormack Dec 19 '13 at 11:18
2

Please note that the equals to rule attribute is data-rule-equalto="#password" (without 's'). – Fabian Vilers Jul 06 '15 at 07:43
If you want to do it dynamically, just add this line: $('#password-confirm').attr('data-rule-equalto', '#password'); – Pankwood Aug 05 '21 at 15:10

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

From the documentation http://jqueryvalidation.org/rules:

There are several ways to specify validation rules.

Validation methods without parameters can be specified as classes on the element (recommended)

Validation methods with parameters can be specified as attributes (recommended)

Both can be specified as metadata using the metadata plugin [[[note that this is deprecated, so the docs appear to be out of date a bit]]]

Both can be specified using the rules-option of the validate()-method

https://stackoverflow.com/a/14380401/749227 has some additional useful information.

I prefer using the 'required' attribute over a class, though. I don't find this sort of native attribute support it directly referenced in the documentation, but since it seems like screen-readers would find it more useful than class="required" I go with that in this one case.

As an aside, I'd love to see what other native attributes are respected by the plugin. And info on which of them are picked up by ADTs.

score 1 · Answer 3 · edited Feb 09 '13 at 23:25

1

In answer to your specific questions:

"How would you use the "max( value )" method with a tag attribute"

<input id="mytext" name="mytext" max="2"/>

"How would you use the "max( value )" method with a ... CSS class"

You can't do this, use one of the other ways to setup the rule.

edited Feb 09 '13 at 23:25

Mike

23,542
14
76
87

answered Jan 24 '13 at 14:37

politus

5,996
1
33
42

score 0 · Answer 4 · answered Aug 07 '13 at 10:26

0

you can use data-rule-required attribute , please don`t use jquery.metadata.js , i have test in jQuery Validation Plugin 1.11.1

answered Aug 07 '13 at 10:26

Gavin

11
3

I believe the developer recently removed support for the metadata plugin - I'd have to check though. – jinglesthula Nov 16 '13 at 00:21

Declaring jQuery Validate plugin rules -- attribute vs. class vs. code

4 Answers4

Linked