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:

Answer 1

I think you can do that without actually writing your own validator method.

$('#myForm').validate({
    rules: {
         value1: {
             maxlength: $('#value2').val().length
         }
    }
});

$('#value2').change(function() {
    $('#value1').rules('remove', 'maxlength').rules('add', {
         maxlength: $('#value2').val().length
    });
});

or even better without code duplication

function getRule() {
    return {
        maxlength: $('#value2').val().length
    };
}

$('#myForm').validate({
    rules: {
         value1: getRule()
    }
});

$('#value2').change(function() {
    $('#value1').rules('remove', 'maxlength').rules('add', getRule());
});

Answer 2

You can insert your validation method within any document ready block, like the one shown below.

$().ready(function() {

    $.validator.addMethod("lessThan",
        function(value, element, param) {
            var i = parseFloat(value);
            var j = parseFloat(param);
            return (i < j) ? true : false;
        }
    );

});

I've tried to keep this simple so that you can modify it. If the method is called "lessThan" then it should do just that. If your method actually performs "less than or Equal To" consider a more appropriate name.

Please note that I am also using parseFloat, allowing the method more flexibility than parseInt.

From within your validator, you were using it correctly; so for a validation of say, less than 10:

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

Good luck!

Answer 3

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 4

I think its better to use HTML max attribute.

<input type="number" placeholder="Marks" required name="marks" max="100">

validation will be Please enter a value less than or equal to 100. Where as you can also change max value to 99 for only less than 100 value.

Answer 5

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"
        }
    }
});