CODEWITHSUNDEEP
javascriptjqueryjquery-validate
LiamHT
LiamHT

Reputation: 1332

jquery validation range not working with negative number

I'm using jquery validation to ensure my users do not enter a negative value into a text field.

I have everything set up correctly and the validation is working for certain things, just not the a range. if I input a negative value, validation still passes. Has anyone encountered this?

 <input data-affects="Coaches" data-old="40" data-val="true" data-val-number="The field Maximum Students must be a number." data-val-range="The field Maximum Students must be between 0 and 200." data-val-range-max="200" data-val-range-min="0" id="NumStudentsMax" name="NumStudentsMax" type="number" value="40" aria-invalid="false" class="valid"/>


var foo = null;
$("input").blur(function(e){
    foo = $("form").validate($(this));
    alert(foo.errorList.length > 0);
});

demo: https://jsfiddle.net/guzzjty1/5/

Upvotes: 0

Views: 1866

Answers (3)

Albos Hajdari
Albos Hajdari

Reputation: 121

Try adding data-val-range-min="5E-324" as an attribute to your input This says values greater than 0. Actually 5E-324 is the smallest positive value.

Upvotes: 0

LiamHT
LiamHT

Reputation: 1332

Seems like the problem is due to html validation and unobtrusive validation becoming more inline. as mentioned by Mohit, it now works with the 'min' attribute.

As asp.net mvc adds the data-val-range-min value. my quick fix just took that value and inserted a 'min' attribute with the same value, using javascript

   //fix validator for range
    $("[data-val-range-min]").each(function (e) {
      var t =  $("[data-val-range-min]:eq("+e+")")
    t.attr("min", t.attr("data-val-range-min"));
    });
    $("[data-val-range-max]").each(function (e) {
        var t = $("[data-val-range-max]:eq(" + e + ")")
        t.attr("max", t.attr("data-val-range-max"));
    });

Upvotes: 0

Umesh Sehta
Umesh Sehta

Reputation: 10683

add min="0" to your input :-

  <input data-affects="Coaches" data-old="40" data-val="true" data-val-number="The field Maximum Students must be a number." data-val-range="The field Maximum Students must be between 0 and 200." data-val-range-max="200" data-val-range-min="0" id="NumStudentsMax" name="NumStudentsMax" min="0" type="number" value="40" aria-invalid="false" class="valid"/>

Demo

Upvotes: 1

Related Questions