client-side validation trips on DataAnnotation Range attribute

Question

I have the following code in my Model class:

    [Range(1, 100)]
    public decimal Price { get; set; }

After recent upgrade (I assume) of jquery.validate to 1.11.0, I am getting an error even if I enter valid value. If I turn off client validation in web.config - works fine. All other attributes (StringLength, Required) work fine. Generated HTML is the following (line breaks added for clarity):

<input class="text-box single-line" data-val="true" 
data-val-number="The field Price must be a number." 
data-val-range="The field Price must be between 1 and 100." 
data-val-range-max="100" data-val-range-min="1" 
data-val-required="The Price field is required." id="Price" name="Price" 
type="text" value="" />

I am pretty sure it worked before... Can't think of anything but the bug in jquery.validate.

Answer 1

We are having the same problem with jQuery.validate 1.11.0 and Microsoft.jQuery.Unobtrusive.Validation 2.0.30116.0. Somewhere in the validation library updates, the number validator broke.

There is an open issue on the GitHub issue tracker relating to this problem: https://github.com/jzaefferer/jquery-validation/issues/626

Quoted in that issue:

return this.optional(element) || ( value >= param[0] && value <= param[1] );

Because this line checks strings, not numbers. If I have a range between 30 and 200, and I want to validate 120, then the string 120 is lesser then string 30.

This line must be something like this:

return this.optional(element) || ( Number(value) >= Number(param[0]) && Number(value) <= Number(param[1]) );

I have changed my copy of jquery.validate.js:

// http://docs.jquery.com/Plugins/Validation/Methods/range
range: function( value, element, param ) {
    return this.optional(element) || (value >= param[0] && value <= param[1]) || (Number(value) >= Number(param[0]) && Number(value) <= Number(param[1]));
},

Now the range operations work as intended using DataAnnotations:

[Range(1, 100)]
public decimal Price { get; set; }

Answer 2

Microsoft issued an update to microsoft.jQuery.Unobtrusive.Ajax and to microsoft.jQuery.Unobtrusive.Validation (from version '2.0.20710.0' to '2.0.30116.0') that fixes both .live and validation problems

Answer 3

This happening because you have updated Jquery version and new version of Jquery has different new updates and they have also removed some function like .live and replaced it with .on

Go through it...

http://jquery.com/upgrade-guide/1.9/#live-removed

Answer 4

I run into this recently. I upgraded from MVC 2 to MVC 5. It seems that parameter name was changed from "minimum" and "maximum" to "min" and "max"

If you want to fix the issue without going through the hassle of upgrading your JavaScript files, search in your solution for these two lines and replace them with the better line

rule.ValidationParameters['minimum']

replace with

typeof(rule.ValidationParameters['minimum'])!='undefined'?rule.ValidationParameters['minimum']:rule.ValidationParameters['min']

and

rule.ValidationParameters['maximum'];

with

typeof(rule.ValidationParameters['maximum'])!='undefined'?rule.ValidationParameters['maximum']:rule.ValidationParameters['max']

Or alternatively, replace "RangeValidator" function with this code

Sys.Mvc.RangeValidator.create=function(rule){var $0=typeof(rule.ValidationParameters['minimum'])!='undefined'?rule.ValidationParameters['minimum']:rule.ValidationParameters['min'];var $1=typeof(rule.ValidationParameters['maximum'])!='undefined'?rule.ValidationParameters['maximum']:rule.ValidationParameters['max'];return Function.createDelegate(new Sys.Mvc.RangeValidator($0,$1),new Sys.Mvc.RangeValidator($0,$1).validate);}