How can we specify rules for jquery validation plugin by class?
Question by Zesty
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 name@domain.com"
}
}
})
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 name@domain.com"
}
}
});
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 name@domain.com"
}
}
});
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?
Thanks!
Answer by Sparky672
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_2" />
JS:
$('#myForm').validate({
rules: {
field_1: {
required: true,
number: true
},
field_2: {
required: true,
number: true
},
field_3: {
required: true,
number: true
}
}
});
Option 1) 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"
}
});
});
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
}
});
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, ruleSet_1, ruleSet_2); // 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_1will be a required number no less than 3. -
field_2will just be a required number. -
field_3will be a required number no greater than 99. -
field_4will be a required number between 3 and 99.
Answer by Starx
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 }
);
