Question

According to the documentation – such as it is – you can specify validation that requires a parameter of an input element by using an attribute. It says this is the recommended method. Like this:

<input type="password" minlength="6" maxlength="50"/>

Okay, that’s easy. Now how do you specify (for example) a range using an html attribute?

<input type="number" range="[5, 50]"/>

No, that doesn’t work. Neither does no brackets, curly braces, curly braces and brackets or any combination thereof. But this works in a completely unexpected way:

<input type="number" range="53"/> 

– it spits out the error message “number must be between 5 and 3”

Can someone please show me the proper syntax for this?

NOTE: This is an exemplar. I realize I could solve this particular problem by using

<input type="number" min="5" max="50"/> 

I’m looking for a more general answer regarding how to construct a complex validation rule using the jquery-validate attributes API.

Thanks!

EDIT

Here’s another example. How do you do this using the “preferred” attribute syntax?

$('form').validate({
    rules: {
        rt: {
          required: function(element) {
            return $("#age").val() < 13;
          }  
        }
    }
});

The following does not work:

<form>
    <input type="text" id="age" name="age"/>
    <input type="text" id="rt" name="rt" required="function(element) { return $('#age').val() < 13;}"/>

    <input type="text" id="tabcatcher"/>
    <input type="submit"/>
</form>

Play with the following jsfiddle:

http://jsfiddle.net/GKNZF/

Answer 1

That’s a known issue/bug in the plugin, as reported here. Basically, the plugin is considering 53 as an array of two digits, with 5 as the mininum value, and 3 as the maximum.

To fix it, you need to apply the following patch:

// Patch by Chris Tierney (CF Webtools 7/13/2011)
// Issue logged at https://github.com/jzaefferer/jquery-validation/issues/112
$.each(['rangelength', 'range'], function() {
    if (typeof rules[this] == 'string') {
        rules[this] = rules[this].split(",");
    }
    if (rules[this]) {
        rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
    }
});