jQuery Validator Validate by class name

It’s no doubt that the jQuery Form validator is a big time saver for most of the web developers around. It helps you to do the client side validation of forms without any difficulty. Recently I wanted to validate a group of form fields (a several Price Fields), which should not allow negative values. But the existing rule I have being using was only that it is required. So I had to change that, and I found that I have been doing the validations based on the field name. But my current requirement is for many fields having the same rule. So I was looking for a way to get it done in a single rule (using the class name)

Here I have found two solutions to achieve this, and I share it with you all expecting it will help to save someone's time :)

Tip: Opt out your common rules and enter the other rules inside the $().validate() as usual. You can enter common rules inside below methods after this.

Method 01: Using jQuery Validator’s  .rules() method.

Ex : I want to validate all the price fields (having class “.price”).

$('.price').each(function() {
            $(this).rules("add", {
                required: true,
                min: 0

Note: You can use this only after the $().validate() method is called. Otherwise it will not work.

Method 02: Using the addClassRules() method.

This method is developed mainly for this type of validations. It does the iteration through all the elements by itself, which we did manually in method 01.

$.validator.addClassRules("price", {
     required: true,
     minlength: 2

Note: Unlike in method 01, you don't need this method to be after the $().validate() always. You can even call this method before the $().validate().

Please leave a comment and let me know if this was helpful to you.


Post a Comment