CODEWITHSUNDEEP
jqueryjquery-validate
Zesty
Zesty

Reputation: 3001

How can we specify rules for jQuery validation plugin by class?

The jQuery Validation plugin works great and is very easy to use:

$(".selector").validate({
})

Just by setting CSS classes like "required email", the default message will be displayed.

However, I need to customize the messages. The documentation says you can specify rules using a key-value pair for elements and their corresponding messages:

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of [email protected]"
     }
   }
})

But, it is not practical to specify a rule for every form element, especially server-generated controls in ASP.NET. Is it possible to specify rules that would apply to ALL elements? Or can I use a class selector somehow?

I tried the following, but it didn't work:

$("#frmMyForm").validate
({
    rules:
    {
        $(".required email"):
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        $(".required email"):
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of [email protected]"
        }
    }
});

That seemed to have a syntax error - the plugin didn't do anything. Then I tried:

$("#frmMyForm").validate
({
    rules:
    {
        ".required email":
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        ".required email":
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of [email protected]"
        }
    }
});

This didn't have any syntax error - the plugin worked, but it ignored the rules/custom messages. Has anyone here used jQuery Validation plugin? If so, how did you apply rules/custom messages to multiple elements?

Upvotes: 42

Views: 74643

Answers (9)

alok patel
alok patel

Reputation: 1

$.validator.addMethod("cMaxlength", function(value, element, param) {
		
	return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');

Upvotes: -1

user3539640
user3539640

Reputation: 11

You can add class rules using the addClassRules method:

E.g. 

$.validator.addClassRules("your-class", {
  required: true,
  minlength: 2
});

https://jqueryvalidation.org/jQuery.validator.addClassRules/

Upvotes: 0

TheRumIsGone
TheRumIsGone

Reputation: 1

I've built upon Starx's answer to create a repeatable easy to use function that uses the default methods and creates new error messages for specific classes. considering the fact that your specific class will only be used to override the message once you shouldn't have any conflicts reusing this for many different class names using any existing methods.

var CreateValidation = function(className, customMessage, validationMethod){
  var objectString = '{"'+ className +'": true}',
  validator = $.validator;

  validator.addMethod(
    className,
    validator.methods[validationMethod],
    customMessage
  );
  validator.addClassRules(
    className,
    JSON.parse(objectString)
  );
};

Usage Example with validation class being "validation-class-firstname":

CreateValidation('validation-class-firstname', 'Please enter first name', 'required');

Upvotes: 0

Jaimin Soni
Jaimin Soni

Reputation: 1071

$.validator.addMethod("cMaxlength", function(value, element, param) {
		
	return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');

Upvotes: 0

Sparky
Sparky

Reputation: 98748

For the purposes of my example, this is the base starting code:

HTML:

<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_3" />

JS:

$('#myForm').validate({
    rules: {
        field_1: {
            required: true,
            number: true
        },
        field_2: {
            required: true,
            number: true
        },
        field_3: {
            required: true,
            number: true
        }
    }
});

DEMO: http://jsfiddle.net/rq5ra/

NOTE: No matter which technique below is used to assign rules, it's an absolute requirement of the plugin that every element has a unique name attribute.

Option 1a) You can assign classes to your fields based on desired common rules and then assign those rules to the classes. You can also assign custom messages.

HTML:

<input type="text" name="field_1" class="num" />
<input type="text" name="field_2" class="num" />
<input type="text" name="field_3" class="num" />

The .rules() method must be called after invoking .validate()

JS:

$('#myForm').validate({
    // your other plugin options
});

$('.num').each(function() {
    $(this).rules('add', {
        required: true,
        number: true,
        messages: {
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});

DEMO: http://jsfiddle.net/rq5ra/1/

Option 1b) Same as above, but instead of using a class, it matches a common part of the name attribute:

$('[name*="field"]').each(function() {
    $(this).rules('add', {
        required: true,
        number: true,
        messages: { // optional custom messages
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});

DEMO: http://jsfiddle.net/rq5ra/6/

Option 2a) You can pull out the groups of rules and combine them into common variables.

var ruleSet1 = {
        required: true,
        number: true
    };

$('#myForm').validate({
    rules: {
        field_1: ruleSet1,
        field_2: ruleSet1,
        field_3: ruleSet1
    }
});

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

Option 2b) Related to 2a above but depending on your level of complexity, can separate out the rules that are common to certain groups and use .extend() to recombine them in an infinite numbers of ways.

var ruleSet_default = {
        required: true,
        number: true
    };

var ruleSet1 = {
        max: 99
    };
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1

var ruleSet2 = {
        min: 3
    };
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2

var ruleSet3 = { };
$.extend(ruleSet3, ruleSet1, ruleSet2); // combines sets 2 & 1 into set 3.  Defaults are included since they were already combined into sets 1 & 2 previously.

$('#myForm').validate({
    rules: {
        field_1: ruleSet2,
        field_2: ruleSet_default,
        field_3: ruleSet1,
        field_4: ruleSet3
    }
});

End Result:

  • field_1 will be a required number no less than 3.
  • field_2 will just be a required number.
  • field_3 will be a required number no greater than 99.
  • field_4 will be a required number between 3 and 99.

DEMO: http://jsfiddle.net/rq5ra/5/

Upvotes: 79

Daniel Fran&#231;a
Daniel Fran&#231;a

Reputation: 41

Alternative approach:

$.validator.addMethod("cMaxlength", function(value, element, param) {
		
	return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');

Gist: https://gist.github.com/uhtred/833f3b957d61e94fbff6

$.validator.addClassRules({
    'credit-card': {
    	cMaxlength: [ 'Invalid number.', 19 ]
    }
});

Upvotes: 0

dev4092
dev4092

Reputation: 2891

Before this you have to include Query file

$("#myform_name").validate({
    onfocusout: function(element) { $(element).valid(); } ,
    rules:{
       myfield_name: {
          required:true
       },
       onkeyup: false,
       messages: {
          myoffer: "May not be empty"
       }
    }
});

Upvotes: -1

Starx
Starx

Reputation: 79041

jQuery.validator.addClassRules(); will attach the validation to class, but there is no option for messages, it will use the general error messages.

If you want that to work then, you should refactor the rules like this

$.validator.addMethod(
     "newEmail", //name of a virtual validator
     $.validator.methods.email, //use the actual email validator
     "Random message of email"
);

//Now you can use the addClassRules and give a custom error message as well.
$.validator.addClassRules(
   "email", //your class name
   { newEmail: true }
 );

Upvotes: 19

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100195

You could use addClassRules, like:


jQuery.validator.addClassRules("name", {
  required: true,
  minlength: 2
});

Upvotes: 25

Related Questions