Activate one validator at a time in a webform

Recently we had a WFFM form that had 3 separate validators running on the same field - a password field with 3 different regular expression validators, one for length and two for other password policy rules.

The issue with the implementation was that for some invalid test inputs, at least two of the validators would kick in simultaneously, which was not anticipated by the website design (the design allowed only one validator active at any given point).

My solution was to tap into the ValidatorUpdateDisplay that is defined in one of the ASP.NET javascript resources and simply override it. To do that, I first recognized that functions in javascript are object like, so first of all, I assigned the function to my own variable:

var vold = ValidatorUpdateDisplay;

Then I changed the original to cater for my needs making sure I called the original at the end:

var ValidatorUpdateDisplay = function (validator) {
var ValidatorUpdateDisplay = function (validator) {
    if (!validator.isvalid) {
        for (i = 0; i < Page_Validators.length; i++) {
            if (Page_Validators[i].controltovalidate == validator.controltovalidate 
                       && !Page_Validators[i].isvalid && Page_Validators[i].id != validator.id) {
                validator.isvalid = true;
            }
        }
    }
    vold(validator);
}

So now, only one invalid validator per field is actually "active" at any given time.

Apparently, this approach is valid outside the boundaries of WFFM as well, any old webform can benefit from this.

Happy coding!