Numeric Range validation does not work properly in jquery.validate.unobtrusive.js

Question

I'm using jQuery Validation Plugin, v1.11.0,2/4/2013 with jquery.validate.unobtrusive.js.

I guess I face a bug of Range validation for numeric field: Validation compares String value with String of Min and String of Max, instead of comparing Number of field with min-number and max-number.

Repro-steps:

You set validation range 1-1000, using following HTML:

<input name="Data.MaxConcurrentInstances" class="text-box single-line" id="Data_MaxConcurrentInstances" type="number" value="" data-val-number="The field Max concurrent instances must be a number." data-val="true" data-val-range-min="1" data-val-range-max="1000" data-val-range="The field Max concurrent instances must be between 1 and 1000.">

You set test field value: 7.

Expected results: Validation successfull. No errors.

Actual results: Validation fails. Internal reason: it fails because alphabetically string "7" goes after string "1" and "1000", not between them.

Question: Is it this bug known? What is the best workaround for that?

Limpid

Answer 1

I also see this issue. I just confirmed that it is fixed in JQuery Validation 1.11.1 update by updating my code manually. The update is not yet published on the NuGET repositories.

You can download the update from here: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

The Microsoft CDN addresses are:

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js

---

Update from April 3rd:

the NuGET package update is now available. If you update to JQuery Validation 1.11.1 via NuGET you'll have the issue fixed.

Scarlatti

Thanks for info. did you actually test it? Because I saw other threads, people were saying this was fixed a while ago for previous versions, but it was not. Also is there any information when NuGet will be updated? – Limpid

Hi. Yes, I actually tested it on my application. I had a whole lot of range validations and all of them where broken. I just replaces the JS file content (that was originally installed by NuGET) with the newer version (copy and paste) and all of my pages are now behaving. NuGET package is already released now. – Scarlatti

I've just updated JQuery validation in NuGet manager for my projects and now Range validation works fine. – Limpid

Answer 2

So far the best workaround I found is running patching start up script:

$(document).ready(function() {
    window.setTimeout(function () {
        //Fixing jquery Unobtrusive validation range integer bug
        var allRules = $.data(document.forms[0], "validator").settings.rules;
        for (var ruleName in allRules) {
            var rule = allRules[ruleName];

            if (rule.range != undefined && rule.number)
                for (var ri = rule.range.length-1; ri >=0 ; ri--) {
                    rule.range[ri] = Number(rule.range[ri]);
                }
        }
    }, 100);
});

Limpid

I am having the exact same issue. The above work-around works, but has a minor bug in the for/next loop. Replace line 9 with: "for (var ri = rule.range.length - 1; ri >= 0 ; ri--) {". I updated, but the change must be approved by peer review. – Phenolic

Can you explain why you suggest enumerate in reverse order? – Limpid

For better performance you do not want to be evaluating the length of the array in each iteration. There are a couple of different ways to do this. Check openjs.com/articles/for_loop.php – Phenolic

Answer 3

One of the workaround would be to override the range method of jquery validator as follows:

$.validator.methods.range = function (value, element, param) {
        return this.optional(element) || (Number(value) >= Number(param[0]) && Number(value) <= Number(param[1]));
    }

The actual code for range in the validator plugin is

range : function (value, element, param) {
            return this.optional(element) || (value >= param[0] && value <= param[1]);
        }

On converting the String type value in the value, param[0] and param[1] to Number type using Number(value), Number(param[0]) and Number(param[1]) a proper comparison occurs between Number and not between String.

Ossifrage