jQuery validate less than

Question

I am trying to write a Less than validator for jQuery.

I want to compare one text box against another, so if I have:

<input type="text" id="value1" /> <input type="text" id="value2" />

I want my validator to look like

$('#myForm').validate({rules: { value1: { lessThan: "#value2" } } });

I have tried this but I can't get it to work:

$.validator.addMethod('lessThan', function(value, element, param) {
    var i = parseInt(value);
    var j = parseInt($(param).val());
    return i >= j;
}, "Less Than");

Another question is where should I put that code? In $(document).ready or just in a <script> tag?

Answer 1

I'm an idiot. I had made some typo's in my actual code and I'd messed up the this.optional(element) that I see in a lot of validator methods. Here is the working function:

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

Here is the condensed version

$.validator.addMethod('lessThanEqual', function(value, element, param) {
    return this.optional(element) || parseInt(value) <= parseInt($(param).val());
}, "The value {0} must be less than {1}");

Now I need to figure out how to rerun validation for field 1 when I change field2.

Answer 2

Consider (A) is the name of the input that you want the value of it to be less than (#B) input. this code worked with me after making the type of the two inputs is: type="number"

$("#form").validate({
    rules: {
        A: {
            lessThan: "#B"
        }
    }
});