26

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?

2
  • 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, and post a more specific question when you get stuck.
    – Sparky
    Jan 3, 2013 at 19:51
  • Possible dupe: stackoverflow.com/questions/14375707/…
    – Sparky
    Jan 22, 2013 at 21:58

4 Answers 4

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();
3
  • 3
    It's worth noting that the 'data-rule-' markup feature is only available in jquery.validate v1.10 and above. Dec 19, 2013 at 11:18
  • 2
    Please note that the equals to rule attribute is data-rule-equalto="#password" (without 's'). Jul 6, 2015 at 7:43
  • If you want to do it dynamically, just add this line: $('#password-confirm').attr('data-rule-equalto', '#password');
    – Pankwood
    Aug 5, 2021 at 15:10
2

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.

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.

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

1
  • I believe the developer recently removed support for the metadata plugin - I'd have to check though. Nov 16, 2013 at 0:21

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.