Jquery Validation GreaterThanEqual & LessThanEqual not working correctly above number 9-CodePudding

I've made this simple form that should work correctly. I can't seem to find the issue. It works well until the number fields (Length & Width) have an input of 9 but when I put 10 and above, it asks for a greater number.

Here's the code:

HTML

<div class="form-group col-md">
    <label class="form-label mb-1 text-2" for="length">Length</label>
    <input type="number" class="form-control text-3 h-auto py-2 sizes-units" name="length" id="length" value="{{ Request::Input('length') }}">
</div>
<div class="form-group col-md">
    <label class="form-label mb-1 text-2" for="width">Width</label>
    <input type="number" class="form-control text-3 h-auto py-2 sizes-units" name="width" id="width" value="{{ Request::Input('width') }}">
</div>
<div class="form-group col-md">
    <label class="form-label mb-1 text-2" for="height">Height</label>
    <input type="number" class="form-control text-3 h-auto py-2 sizes-units" name="height" id="height" value="{{ Request::Input('height') }}">
</div>

Jquery

rules: {
  length: {
    required: true,
    min: 2,
    max: 30,
    greaterThanEqual: "#height",
  },
  width: {
    required: true,
    min: 2,
    max: 30,
    greaterThanEqual: "#height",
  },
  height: {
    required: true,
    min: 1,
    max: 7,
  }
}

I'm sorry if this may be a stupid question. I've ONLY ever worked in php and laravel. I've mostly been able to avoid anything javascript by using everything pre-built or by using server side validation. I can't tho in this case because this form is supposed to calculate pricing on same page and is using "Get" Request so ...

CodePudding user response：

First up I assume you're using jQuery Validate as the validation plugin - you've not specified.

I cannot be 100% sure, but I'm pretty certain it's your 'greaterThanEqual' rule that's causing at least some of the problems.

EDIT :

Since you've confirmed you're using the https://github.com/jquery-validation/jquery-validation/blob/master/src/additional/greaterThanEqual.js method, then from my testing it should just be a case of changing :

return value >= target.val();

return value >= parseInt(target.val());

to cast the value to an integer, rather than a string, as you suspected. That seems to work now.