Search jQuery

jQuery Forum

jQuery Validator: Validate Range

in Using jQuery Plugins • 6 years ago

My form has two fields: fromYear and tillYear. Since both these fields are a part of a group of fields that repeat (or clone) I'm using following rule:

"fromYear[]": {
    digits: true,
    range: [1950, currentYear],
    minlength: 4,
    maxlength: 4
},
"tillYear[]": {
    digits: true,
    range: ["fromYear", "fromYear"+10] //How do I write it?
    minlength: 4,
    maxlength: 4

}

I wish to validate the tillYear range as : range: [fromYear, fromYear+10] and have no clue how to do it. Would really appreciate your help.

Replies(8)

TheBigK

Re: jQuery Validator: Validate Range

6 years ago

After several tries, I found that this 'kinda' works; but not immediately after user has filled the fromYear:

"fromYear[]": {
    digits: true,
    range: [1950, currentYear],
    minlength: 4,
    maxlength: 4
},
"tillYear[]": {
    digits: true,
    min: $(".fromYear").val(),
    minlength: 4,
    maxlength: 4

},

kbwood.au

Re: jQuery Validator: Validate Range

6 years ago

You would need to create your own validation rule. Something like this:

$.validator.addMethod('yearRange', function(value, element) {
var fromYear = parseInt($('.fromYear').val(), 10);
return this.optional(element) || (value >= fromYear && value <= fromYear + 10);
}, 'Till year cannot be more than 10 years after from year');
...
'tillYear[]': {
digits: true,
minlength: 4,
maxlength: 4,
yearRange: true
}

It looks like you might have multiple fromYear/tillYear groups, so you would need to adjust the rule slightly to match them up.

TheBigK

Re: jQuery Validator: Validate Range

6 years ago

Well, looks like I've problem with the selectors. Because these fields are part of repeating groups; I must use the 'name' attribute to select the element. This is how I'm using it

parsInt($("name=['fromYear[]']).val(), 10);

That said, I'm even looking at adding a class to the fromYear and tillYear elements; but that makes jQuery confuse about which class to select. What could be the way to fix this issue?

kbwood.au

Re: jQuery Validator: Validate Range

6 years ago

You need to navigate from the tillYear to its corresponding fromYear to get that value. You don't show any markup, so I'm just guessing, but it would be something like this, assuming there is a div surrounding each set of fields:

var fromYear = parseInt($(element).closest('div').find('.fromYear').val(), 10);

TheBigK

Re: Re: jQuery Validator: Validate Range

6 years ago

My apologies. Here's my markup:

<div class="section colm colm3">
<label class="field prepend-icon">
<input type="text" name="fromYear[]" id="<?php echo "fromYear_" . $i; ?>" class="gui-input fromYear" placeholder="From" value="<?php echo $value['fromYear']; ?>">
<span class="field-icon"><i class="fa fa-calendar"></i></span>
</label>
</div>
<div class="section colm colm3">
<label class="field prepend-icon ">
<input type="text" name="tillYear[]" id="<?php echo "tillYear_" . $i; ?>" class="gui-input tillYear" placeholder="Till" value="<?php echo $value['tillYear']; ?>">
<span class="field-icon"><i class="fa fa-calendar"></i></span>
</label>
</div>

Update: The validator always fails with