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

The standard CustomValidator has a ClientValidationFunction property for that:

<asp:CustomValidator ControlToValidate="Text1" 
                     ClientValidationFunction="onValidate" />

<script type='text/javascript'>
function onValidate(validatorSpan, eventArgs)
 { eventArgs.IsValid = (eventArgs.Value.length > 0);
   if (!eventArgs.IsValid) highlight(validatorSpan);
 }
</script>

Answer 2

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');
    }
}

Answer 3

What you can do is hook into the validator and assign a new evaluate method, like this:

  <script type="text/javascript">
        rfv.evaluationfunction = validator;

        function validator(sender, e) {
            alert('rawr');
        }
    </script>

rfv is the ID of my required field validator. You have to do this at the bottom of your page so that it assigns it after the javascript for the validator is registered.

Its much easier just to use the CustomFieldValidator and assign its client side validation property.

<asp:CustomValidator ControlToValidate="txtBox" ClientValidationFunction="onValidate" />

<script type='text/javascript'>
function onValidate(sender, e)
 { 
     alert('do validation');
 }
</script>

Check out the documentation here and here.