Specifiy the order of the validators in jQuery validate plugin

I'm wondering if it's possible to specify the order in which the validators are run.

Currently I wrote a custom validator that check if it's [a-zA-Z0-9]+ to make sure the login validates our rules and a remote validator to make sure that the login is available but currently the remote validator is lauched before my custom validator. I would like to launch the remote validator only if the element validates my 开发者_JAVA技巧custom validator.

Any clue ?

thanks for reading

---

You need to augment/monkey patch/overwrite (whichever term makes the most sense to you) the $.fn.rules that the validate plugin uses when creating the rules to run for a field to push your rule to second place in the rules object, after the required rule.

If you search for rules in the script, you'll need to add similar logic to this just before if (data.required)

If (data.yourRuleName) {
    var param = data.yourRuleName;
    delete data.yourRuleName;
    data = $.extend({ yourRuleName: param }, data);
}

Or you can copy the rules section out, add the above and put it in a script that is referenced after the validate script. This way, if the script changes, you won't have to go applying these changes to the new version of the script (assuming that rules would still work the same way).

---

As far as I understand, the rules for a given element are processed in the order they appear. And since version 1.12, "required" rule is always processed first, and "remote" last.

---

it's been a while since last message, but it could be useful for someone...

if you want to set more rules on the same tag, for example

<input data-rule-regex="(\w\d)+" data-rule-rangewords="[2,5]" data-rule-minlength="10" >

when you test your rule the order is not the same order as they are inserted, so in this case it's a problem because if you insert the following string

abcdefghi

jquery validator prints these messages

1) first error message related to minlength 2) second error message related to rangewords 3) third error message related to regex expression

but it is wrong because if I have already inserted the string

abcdefghi

and the message appeared has been the error message for minlength, and now I insert another character

abcdefghil --> length 10

at this point I have to clean the string because the second error message tells me that I have to insert at least two words or more... between [2,5] exactly

and the same thing for regular expression after inserting two or more words that it will appear the third error message about regex, and also in this case I have to clean my string ect...

this behavior is due to the list of methods inside jquery.validate.js

because the plugin take that order...

so, my solution is this:

put for each rule that you want to insert on a tag this attribute

data-rule-(method you want)-order

and initialize it with an index from zero...

for example in our case we have three rules

<input 
data-rule-regex="(\w\d)+" data-rule-regex-order="0" 
data-rule-rangewords="[2,5]" data-rule-rangewords-order="1"
data-rule-minlength="10" data-rule-minlength-order="2"
ofcourse you need also the messages (if you want)
data-msg-regex="..." etc...
>

at this point, if you don't want to override the library (jquery.validate.js) you can create a custom.js file and insert the following code:

---

$(document).ready(function() {
    (function($){
        $.validator.dataRules = function(element) {
            rules = {},
            $element = $( element ),
            type = element.getAttribute( "type" ),
            method, value, orderIndex, orderArr = {};

            for ( method in $.validator.methods ) {
                value = $element.data( "rule" + method.charAt( 0 ).toUpperCase() +method.substring( 1 ).toLowerCase() );
                orderIndex = $element.data( "rule" + method.charAt( 0 ).toUpperCase() +method.substring( 1 ).toLowerCase() + "Order" );

                if(typeof orderIndex !== "undefined") orderArr[orderIndex] = {"rules":rules,"type":type, "method":method, "value":value};
            }       

            for ( var ord in orderArr ) this.normalizeAttributeRule( orderArr[ord].rules,orderArr[ord].type, orderArr[ord].method, orderArr[ord].value );

            return rules;

        }
    })(jQuery);             
});

---

I hope it will be useful for you

m.

---

I'm going to clean up @matty's soilution here. I'd comment there, but strange decision on reputation to do so??? ¯\(ツ)/¯

matty's solution returns 'rules' but never writes to it. And as well, you'll need something like jQueryValidation@1.15+ for the 'normalizeAttributeRule' routine.

$(document).ready(function () {
    (function ($) {
        $.validator.dataRules = function (element) {
            var rules = {};
            var $element = $(element);
            var type = element.getAttribute("type");
            var method;
            var value;
            var orderIndex;
            var orderArr = {};

            for (method in $.validator.methods) {
                value = $element.data("rule" + method.charAt(0).toUpperCase() + method.substring(1).toLowerCase());
                orderIndex = $element.data("rule" + method.charAt(0).toUpperCase() + method.substring(1).toLowerCase() + "Order");

                if (typeof orderIndex !== "undefined") orderArr[orderIndex] = { "rules": rules, "type": type, "method": method, "value": value };
            }

            for (var ord in orderArr) {
                this.normalizeAttributeRule(orderArr[ord].rules, orderArr[ord].type, orderArr[ord].method, orderArr[ord].value);
                rules[orderArr[ord].method] = orderArr[ord];
            }

            return rules;
        }
    })(jQuery);
});

Seems to work for me after some adjustments.

---

• you can use event.preventDefault(); to stop default validation event. http://api.jquery.com/event.preventDefault/

• then run your custom validator

• then run default validator