JQuery Validate custom validator with multiple parameters in metadata tag and message

Question

I want to use jQuery Validate to check the age between two years in a metadata tag and specify years as parameters.

I have a problem: I cannot pass parameters as an object, so I do not know how to access them in the error message (and I can not find any documentation on it).

HTML

<input type="text" name="dob" id="dob" validAge="[17,66]" /> 

Javascript

 jQuery.validator.addMethod('validAge', function (value, element, params) { value = eLifeViewModel.age(); if (value === '') { return false; } var range = JSON.parse(params); return value > range[0] && value < range[1]; }, $.format('Applicants must be older than {0} and younger than {1} years of age')); 

The output for {0} is my parameter string, and {1} is the HTTPInputElement.

Now I have written the minAge and maxAge functions to get around this, but I would still like to get permission to do this.

Answer 1

You cannot find documentation, because you cannot do this.

Using the jQuery Validation plugin and custom method, you cannot declare a built-in validAge rule when you need to pass parameters.

 <input type="text" name="dob" id="dob" validAge="[17,66]" /> 

Only certain rules that can be declared with a boolean value (can be declared as class names), or rules that are also HTML5 validation attributes, can be declared inline.

For your custom method with parameters, it should (maybe) be declared in the .validate() method ...

 $('#myform').validate({ // your options, rules, etc, rules: { dob: { validAge: [17,66] } } }); 

---

EDIT :

As @John Bubriski notes, this should work. The operator incorrectly accessed parameters in its user method.

The OP used JSON.parse ...

 var range = JSON.parse(params); 

which throws a syntax error in the console because it does not recognize params as a valid JSON string. Analysis of the params variable is not required.

Parameters are passed to the function as params , so they can be accessed directly as params[0] , params[1] , etc.

 jQuery.validator.addMethod('validAge', function (value, element, params) { value = eLifeViewModel.age(); if (value === '') { // <- You do NOT need this! /* Use the "required" rule instead of this conditional */ return false; } return value > params[0] && value < params[1]; }, $.format('Applicants must be older than {0} and younger than {1} years of age')); 

Answer 2

This works, at least in the latest jQuery / Validate. Here is a fiddle showing some custom validators, 3 of which take an array of parameters: http://jsfiddle.net/jbubriski/YQgEq/120/

Here is one example that takes string parameters. Instead of saying data-rule-customname="true" , you specify the parameters data-rule-customname='["string",1,2,3]' .

(Pay attention to flipping quotes ... using single quotes to indicate strings doesn't seem to work. Use double quotes)

Markup:

 <div> Custom 3 (Requires 'pig' or 'mouse'): <input type="text" id="custom3" name="custom3" data-rule-required="true" data-rule-customv3='["pig","mouse"]' data-msg-customv3="Enter a cool animal name!" /> </div> 

JS:

 jQuery.validator.addMethod("customv3", function(value, element, params) { if (this.optional(element)) return true; for (var i = 0; i < params.length; i++) if (value == params[i]) return true return false; }, jQuery.validator.format("Please enter one of the following values: {0} {1}")); 

The only problem with the above example is that I'm not sure if there is a way to dynamically generate an error message if you expect n parameters. The current code works fine, but takes 2 parameters.

I also have a blog post that describes some other aspects of using attribute-based validation: http://johnnycode.com/2014/03/27/using-jquery-validate-plugin-html5-data-attribute-rules/

Answer 3

The params variable does not return a string, but an object.

Try passing the range directly from the parameters:

 jQuery.validator.addMethod('validAge', function (value, element, params) { value = eLifeViewModel.age(); if (value === '') { return false; } return value > params[0] && value < params[1]; }, $.format('Applicants must be older than {0} and younger than {1} years of age'));