Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 589
Philipp Munin Avatar asked Mar 25 '13 07:03

Philipp Munin


People also ask

How does jQuery unobtrusive validation work?

Unobtrusive Validation means without writing a lot of validation code, you can perform simple client-side validation by adding the suitable attributes and including the suitable script files. data-val-required=”This is required.”

Is numeric jQuery validation?

The isNumeric() method in jQuery is used to determine whether the passed argument is a numeric value or not. The isNumeric() method returns a Boolean value. If the given argument is a numeric value, the method returns true; otherwise, it returns false. This method is helpful as it decreases the lines of code.

What does validator unobtrusive parse do?

validator. unobtrusive. parse(selector) method to force parsing. This method parses all the HTML elements in the specified selector and looks for input elements decorated with the [data-val=true] attribute value and enables validation according to the data-val-* attribute values.

Is valid jQuery validate?

valid() from the jQuery Validation plugin: $("#form_id"). valid(); Checks whether the selected form is valid or whether all selected elements are valid.


1 Answers

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.

like image 139
user1477054 Avatar answered Sep 18 '22 23:09

user1477054