Adding jQuery validation rules based on data- attributes in a loop

Question

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.net/kaVKe/1/

BNL · Accepted Answer · 2012-01-25 15:36:51Z

6

It 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.

answered Jan 25, 2012 at 15:36

BNL

7,1214 gold badges30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

No Results Found Over a year ago

Thanks, I knew it was something basic. Javascript is not my strong point, I appreciate the quick explanation.

Yoshi · Accepted Answer · 2012-01-25 15:37:01Z

5

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
}

answered Jan 25, 2012 at 15:37

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

1 Comment

No Results Found Over a year ago

Works great, thanks. I knew it was some elementary javascript that was my problem.

Nicola Peluchetti · Accepted Answer · 2012-01-25 15:34:37Z

3

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.net/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)

answered Jan 25, 2012 at 15:34

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

3 Comments

No Results Found Over a year ago

Thanks for the workaround. Won't looping through every input regardless of whether it has the attribute or now be much slower than using a more specific selector? I guess I'll test it out and see.

Nicola Peluchetti Over a year ago

@Madmartigan that depends on the number of inputs, it certainly might be, but also selecting inputs filtering by attribute is not that fast...you could add a class server side when an input hase at least one of those attributes and filter the input using the class

No Results Found Over a year ago

I've accepeted another answer because I think it highlights my mistake more clearly, but this might be actually what I use, because I have a couple other data- rules that need a little finessing so I eventually do need to cycle through more inputs. Might as well just do it once. Thanks a lot.

Collectives™ on Stack Overflow

Adding jQuery validation rules based on data- attributes in a loop

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related