Can you have custom client-side javascript Validation for standard ASP.NET Web Form Validators?

Question

Can you have custom client-side javascript Validation for standard ASP.NET Web Form Validators?

For instance use a asp:RequiredFieldValidator leave the server side code alone but implement your own client notification using jQuery to highlight the field or background color for example.

Answer 1

Yes I have done so. I used Firebug to find out the Dot.Net JS functions and then hijacked the validator functions

The following will be applied to all validators and is purely client side. I use it to change the way the ASP.Net validation is displayed, not the way the validation is actually performed. It must be wrapped in a $(document).ready() to ensure that it overwrites the original ASP.net validation.

/**
 * Re-assigns a couple of the ASP.NET validation JS functions to
 * provide a more flexible approach
 */
function UpgradeASPNETValidation(){
    // Hi-jack the ASP.NET error display only if required
    if (typeof(Page_ClientValidate) != "undefined") {
        ValidatorUpdateDisplay = NicerValidatorUpdateDisplay;
        AspPage_ClientValidate = Page_ClientValidate;
        Page_ClientValidate = NicerPage_ClientValidate;
   }
}

/**
 * Extends the classic ASP.NET validation to add a class to the parent span when invalid
 */
function NicerValidatorUpdateDisplay(val){
    if (val.isvalid){
        // do custom removing
        $(val).fadeOut('slow');
    } else {
        // do custom show
        $(val).fadeIn('slow');
    }
}

/**
 * Extends classic ASP.NET validation to include parent element styling
 */
function NicerPage_ClientValidate(validationGroup){
    var valid = AspPage_ClientValidate(validationGroup);

    if (!valid){
        // do custom styling etc
        // I added a background colour to the parent object
        $(this).parent().addClass('invalidField');
    }
}