Jquery Validation Using the Class Instead of the Name Value

jQuery Validation using the class instead of the name value

You can add the rules based on that selector using .rules("add", options), just remove any rules you want class based out of your validate options, and after calling $(".formToValidate").validate({... });, do this:

$(".checkBox").rules("add", { 
required:true,
minlength:3
});

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

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/

How to add a Class Rule in Jquery Validation

The addClassRules method does not belong inside of .validate().

form.validate({
//NAME RULE
rules: {
//profile
first: {
minlength: 2,
required: true
}
}
});

As per documentation, it gets attached to the validator object to create the compound rule that represents the standard rules specified inside.

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

Usage is as simple as applying the new class to your input.

<input type="text" class="myCompundRule" name="somename" />

Pass rules to class with jQuery Validate plugin

Yes it's possible, but you really should not use duplicate id's... it's invalid HTML and it will lead to JavaScript issues. Use class if you need duplicates.

Use the built-in rules() method to add rules and assign them by class. See documentation.

Then use jQuery's .each() method to to apply rules to all matching elements using that same class.

HTML:

<form id="myform">
<textarea class="myclass" name="field1" ></textarea>
<textarea class="myclass" name="field2" ></textarea>
</form>

jQuery:

$('#myform').validate({
// your other rules and options
});

// the following method must come AFTER .validate()
$('.myclass').each(function() {
$(this).rules('add', {
required: true,
minlength: 5,
maxlength: 500,
messages: {
required: "Required input",
minlength: "Must be at least {0} characters",
maxlength: "Must be less than {0} characters"
}
});
});

Working DEMO


Also, similar to this question:

jQuery Validate set rule using wildcard to find target fields

jQuery validation not working even with name attributes set properly

Your code select it by $('#insert').

It should be:

<form id="insert" method="post">

And the name attribute should add to every fields in the form, otherwise that field will not submitted.

JQuery-Validation - using rules method on selected ID, why does the name attribute have to be present on the element?

A name attribute is required on the element firstly because that's what jQuery validate uses internally as a key for each field, and secondly because the name attribute is required on input elements to ensure the page validates to the specified DOCTYPE.



Related Topics



Leave a reply



Submit