jquery validation dynamic number of pair input fields comparison

Question

Users are allowed to add as many inputs as they want, where the input fields look like this:

<input id="minAge[0]"...
<input id="maxAge[0]"...

<input id="minAge[1]"...
<input id="maxAge[1]"...

<input id="minAge[2]"...
<input id="maxAge[2]"... etc

Problem

I want to validate for each pair of inputs (minAge[i],maxAge[i]) that the maxAge is greater than minAge.

Specific solution

$.validator.addMethod('lessThan', function(value, element, param) {
    if (this.optional(element)) return true;
    var i = parseInt(value);
    var j = parseInt($(param).val());
    return i < j;
}, "MinAge must be less than MaxAge");


$('#form').validate({
    rules: {
        minAge: {
            lessThan: '#maxAge'
        }
 });

How can I make this solution generic?

Also show the function that dynamically creates the new elements. — Sparky
– Sparky, Commented Apr 3, 2014 at 18:11

Sparky · Accepted Answer · 2014-04-03 18:15:52Z

2

First of all, for this plugin, you must have name attributes. The jQuery Validation plugin requires unique name attributes to keep track of all inputs.

<input id="minAge[0]" name="minAge[0]"...
<input id="maxAge[0]" name="maxAge[0]"...

<input id="minAge[1]" name="minAge[1]"...
<input id="maxAge[1]" name="maxAge[1]"...

<input id="minAge[2]" name="minAge[2]"...
<input id="maxAge[2]" name="maxAge[2]"... etc

Then within whatever function you use to dynamically add fields, you would use the .rules('add') method.

$('#minAge[1]').rules('add', {
    required: true,
    lessThan: '#maxAge[1]',
    // another rule, etc.
});

Since I cannot see the function that creates your new element, I can only assume you have some kind of index variable.

var min = '#minAge[' + i + ']',
    max = '#maxAge[' + i + ']';

$(min).rules('add', {
    required: true,
    lessThan: max,
    // another rule, etc.
});

edited Apr 3, 2014 at 18:15

answered Apr 3, 2014 at 18:05

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

1 Comment

user2867106 Over a year ago

this almost works, i can see that the input elements are generated, but when i run the rules('add') I get uncaught exception: Uncaught TypeError: Cannot read property 'form' of undefined. According to the documentation of rules: "Requires that the parent form is validated, that is, $( “form” ).validate() is called first." All the inputs generated (only these) are included in <form> element. What could be there problem?

Nizar Blond · Accepted Answer · 2014-04-04 10:21:57Z

1

A small fix to the solution above:

For the jquery validation will fail. try to use the name xxx[i] and id xxx_i, and in the rules it deals with id so change the code to:

var min = '#minAge_' + i,
    max = '#maxAge_' + i;

$(min).rules('add', {
    required: true,
    lessThan: max,
    // another rule, etc.
});

answered Apr 4, 2014 at 10:21

Nizar Blond

1,8766 gold badges20 silver badges42 bronze badges

1 Comment

Sparky Over a year ago

This is no different than my answer.

Collectives™ on Stack Overflow

jquery validation dynamic number of pair input fields comparison

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related