18

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.

sontek
  • 12,111
  • 12
  • 49
  • 61
Brian Boatright
  • 36,294
  • 34
  • 81
  • 102

3 Answers3

22

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');
    }
}
Geoff
  • 3,749
  • 2
  • 28
  • 24
  • 1
    You should post your sources when pasting code, and this just shows how to hijack *all* validatio, not just a certain validator. You should also mention that this uses jQuery, not standard asp.net ajax. Here is the original article: http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=362 – sontek Sep 24 '08 at 03:03
  • 22
    This is code that I have used in a project at work, that I figured out myself without that article. The OP says he wants to use jQuery. Go flame someone else. – Geoff Sep 24 '08 at 03:06
  • Geoff, I just wanted to say that I was blown away by this snippet. I left my remote desktop connection so I could use a browser where I'm logged in just to say how cool this is. I've actually been looking for this for awhile. Thanks! :) – Brian MacKay Dec 28 '13 at 02:57
  • I need to do something similar to this (adding a class after validation), but in `NicerPage_ClientValidate` `this` is in the scope of the window object. Which version of .NET should this work for? – benedict_w May 30 '14 at 13:11
11

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>
Mark Cidade
  • 98,437
  • 31
  • 224
  • 236
1

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.

sontek
  • 12,111
  • 12
  • 49
  • 61
  • This is how to change the behaviour of the validation, not how to change the way it is displayed. – Geoff Sep 24 '08 at 03:43