LessThan and LessThanEqual methods don't work correctly for negative numbers #2164

Laura-Guillory · 2018-04-16T04:40:30Z

Subject of the issue

When negative numbers are entered in an input field with a lessThan or lessThanEqual rule applied, the form will pass validation when it shouldn't, and fail validation when it should pass - as if the rule was actually greaterThan. What seems to be happening is that the absolute value is used (-1 is treated as 1, for example). So if we have -2 compared to -1, -1 is treated as being "less than" -2, even though -2 < -1.

Your environment

version of jquery-validate: Current repository, not released yet
which browser and its version: Firefox 60.0b11, also tested on Chrome 65.0.3325.181

Steps to reproduce

lessThan with negative numbers:

Open the following HTML file
Enter -2 and -1 in the two input fields respectively

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <form id="form">
        <input id="A" name="A" type="number" value="" /><br />
        <input id="B" name="B" type="number" value="" /><br />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery-validation/jquery.validate.js"></script>
<script src="jquery-validation/additional-methods.js"></script>
<script>
    $("#form").validate({
        rules: {
            A: {
                lessThan: "#B"
            }
        }
    });
</script>

lessThanEqual with negative numbers:

Open the following HTML file
Enter -2 and -1 in the two input fields respectively

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <form id="form">
        <input id="A" name="A" type="number" value="" /><br />
        <input id="B" name="B" type="number" value="" /><br />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery-validation/jquery.validate.js"></script>
<script src="jquery-validation/additional-methods.js"></script>
<script>
    $("#form").validate({
        rules: {
            A: {
                lessThanEquals: "#B"
            }
        }
    });
</script>

Expected behaviour

In both instances, I would expect validation to pass, since -2 < -1.

Actual behaviour

Validation fails with the message: "Please enter a lesser value."
If the numbers are swapped, validation will pass which is incorrect.

The text was updated successfully, but these errors were encountered:

Laura-Guillory · 2018-06-11T07:01:34Z

This is still an issue.

Arkni · 2018-06-27T23:10:29Z

Hi @Laura-Guillory,

Thanks for opening this issue.

I'll mark this issue as a bug for now. I didn't have any look at it, but will revisit when I get some free time.

RobJohnston · 2018-06-28T11:58:16Z

I bet that it's always doing a string compare. Somehow, the data type has to be determined (int, float) before a compare is done. This will have to be done to the greaterThan and greaterThanEqual functions too.

jlmasson · 2022-05-13T11:57:04Z

I bet that it's always doing a string compare. Somehow, the data type has to be determined (int, float) before a compare is done. This will have to be done to the greaterThan and greaterThanEqual functions too.

You're right. This happens in this example "1000" <= "500", you expect to be false, but JS returns true. That's why this validation fails.

The solution for these validations is:

$.validator.addMethod( "lessThanEqual", function( value, element, param ) {
    var target = $( param );

    if ( this.settings.onfocusout && target.not( ".validate-lessThanEqual-blur" ).length ) {
        target.addClass( "validate-lessThanEqual-blur" ).on( "blur.validate-lessThanEqual", function() {
            $( element ).valid();
        } );
    }

    var referenceValue = target.val();
        if ($.isNumeric(value) && $.isNumeric(referenceValue)) {
            value = parseFloat(value);
            referenceValue = parseFloat(referenceValue);
            return value <= referenceValue;
        }

    return value <= target.val();
}, "Please enter a lesser value." );

In the return section, you only have to change the symbol for the correct one. This is for lessThanEqual, lessThan (<), greaterThan (>) and greaterThanEqual (>=)

stale bot added the stale Used to mark stale issues label Jun 5, 2018

stale bot removed the stale Used to mark stale issues label Jun 11, 2018

jquery-validation deleted a comment from stale bot Jun 27, 2018

Arkni added Type: Bug Additional Methods labels Jun 27, 2018

bytestream added the Status: Verified label Jun 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LessThan and LessThanEqual methods don't work correctly for negative numbers #2164

LessThan and LessThanEqual methods don't work correctly for negative numbers #2164

Laura-Guillory commented Apr 16, 2018

Laura-Guillory commented Jun 11, 2018

Arkni commented Jun 27, 2018

RobJohnston commented Jun 28, 2018

jlmasson commented May 13, 2022 •

edited

LessThan and LessThanEqual methods don't work correctly for negative numbers #2164

LessThan and LessThanEqual methods don't work correctly for negative numbers #2164

Comments

Laura-Guillory commented Apr 16, 2018

Subject of the issue

Your environment

Steps to reproduce

Expected behaviour

Actual behaviour

Laura-Guillory commented Jun 11, 2018

Arkni commented Jun 27, 2018

RobJohnston commented Jun 28, 2018

jlmasson commented May 13, 2022 • edited

jlmasson commented May 13, 2022 •

edited