I'm using the jQuery validation plugin trying to add rules based on data- attributes. I'm adding min/maxlength rules based on data-minlength or data-maxlength. Here's some sample HTML:
<form>
<input name="input1" data-maxlength="5" data-minlength="3" required>
<input name="input2" data-maxlength="5" required>
<input name="input3" data-minlength="3" required>
<button>Submit</button>
</form>
I'm doing this to add the rules and it's working fine:
$('input[data-minlength]').each(function(){
if ($(this).data('minlength')) {
$(this).rules("add", {
minlength: $(this).data('minlength')
});
}
});
$('input[data-maxlength]').each(function(){
if ($(this).data('maxlength')) {
$(this).rules("add", {
maxlength: $(this).data('maxlength')
});
}
});
But I wanted to shorten it up, so I tried this and it's not working:
['minlength', 'maxlength'].forEach(function(item){
$('input[data-'+item+']').each(function(){
if ($(this).data(item)) {
// alert(item) shows the correct rule name
$(this).rules("add", {
// Next line fails, but hardcoding a rule name works
item: $(this).data(item)
});
}
});
});
The error is because $.validator.methods[method] is undefined. Somehow it's getting the wrong method name passed to it, even though alert(item) tells me the rule name is correct.
Does anyone have any idea why, or have an alternate solution I can use to shorten up the repetitive, working code above?
Demo: /
I'm using the jQuery validation plugin trying to add rules based on data- attributes. I'm adding min/maxlength rules based on data-minlength or data-maxlength. Here's some sample HTML:
<form>
<input name="input1" data-maxlength="5" data-minlength="3" required>
<input name="input2" data-maxlength="5" required>
<input name="input3" data-minlength="3" required>
<button>Submit</button>
</form>
I'm doing this to add the rules and it's working fine:
$('input[data-minlength]').each(function(){
if ($(this).data('minlength')) {
$(this).rules("add", {
minlength: $(this).data('minlength')
});
}
});
$('input[data-maxlength]').each(function(){
if ($(this).data('maxlength')) {
$(this).rules("add", {
maxlength: $(this).data('maxlength')
});
}
});
But I wanted to shorten it up, so I tried this and it's not working:
['minlength', 'maxlength'].forEach(function(item){
$('input[data-'+item+']').each(function(){
if ($(this).data(item)) {
// alert(item) shows the correct rule name
$(this).rules("add", {
// Next line fails, but hardcoding a rule name works
item: $(this).data(item)
});
}
});
});
The error is because $.validator.methods[method] is undefined. Somehow it's getting the wrong method name passed to it, even though alert(item) tells me the rule name is correct.
Does anyone have any idea why, or have an alternate solution I can use to shorten up the repetitive, working code above?
Demo: http://jsfiddle/kaVKe/1/
Share Improve this question asked Jan 25, 2012 at 15:31 No Results FoundNo Results Found 103k38 gold badges198 silver badges231 bronze badges3 Answers
Reset to default 6It doesn't work because you are creating an object literal with a new property called item.
how about this?
['minlength', 'maxlength'].forEach(function(item){
$('input[data-'+item+']').each(function(){
if ($(this).data(item)) {
// alert(item) shows the correct rule name
var options = {};
options[item] = $(this).data(item);
$(this).rules("add", options);
}
});
});
This creates an options object and adds the proper property you need.
Try:
['minlength', 'maxlength'].forEach(function(item){
$('input[data-'+item+']').each(function(){
if ($(this).data(item)) {
var rule = {};
rule[item] = $(this).data(item);
$(this).rules("add", rule);
}
});
});
Your solution does not work because in object literal notation, property names will not be interpreted as variables:
{
item: ... // <-- this one
}
Why don't you simply do
$('input').each(function(){
var max = $(this).data('maxlength');
var min = $(this).data('minlength')
if (min) {
$(this).rules("add", {
minlength: min
});
}
if (max) {
$(this).rules("add", {
maxlength: max
});
}
});
fiddle here http://jsfiddle/kaVKe/2/ Your code doesn't work i think because you can't use a variable for a property name
// Next line fails, item is always interpreted as item, not as maxlength/minlength
item: $(this).data(item)