I wonder if there's a way to hookup a custom function to asp net client-side validation event, so every time validation is fired by any control I can make some magic on client-side UI

I'm looking for a general approach to intercept page onvalidating event without setting it on every control that causes a postback

Thank you guys

Edit:

I ended up with this function: (thanks to @Kirk)

$(document).ready(function () {
    $('form').submit(function () {
        if (typeof Page_Validators != 'undefined') {
            var errors = '';
            $.each(Page_Validators, function () {
                if (!this.isvalid) {
                    errors += this.errormessage + '\r\n';
                }
            });
            if (errors.length > 0) {
                Alert(errors);
            }
        }
    });    
}); 

I wonder if there's a way to hookup a custom function to asp net client-side validation event, so every time validation is fired by any control I can make some magic on client-side UI

I'm looking for a general approach to intercept page onvalidating event without setting it on every control that causes a postback

Thank you guys

Edit:

I ended up with this function: (thanks to @Kirk)

$(document).ready(function () {
    $('form').submit(function () {
        if (typeof Page_Validators != 'undefined') {
            var errors = '';
            $.each(Page_Validators, function () {
                if (!this.isvalid) {
                    errors += this.errormessage + '\r\n';
                }
            });
            if (errors.length > 0) {
                Alert(errors);
            }
        }
    });    
}); 

• javascript
• asp
• validation

• Have you tried in Ajax Update panel? – Developer Commented Sep 12, 2011 at 14:44

2 Answers 2

To do something along the lines of this you can place an OnClientClick event on the submit button or just the general form submission event.

Then you can use the Client Validation Object Model with the validator controls. This actually allows you to verify each of the validation controls you've setup. There are a couple of values you can check against from the client relating to the page, see http://msdn.microsoft./en-us/library/yb52a4x0.aspx#ClientSideValidation_ClientValidationObjectModel.

You reference each control with isvalid property. For example

<asp:Label id="lblZip" runat="server" Text="Zip Code:" />
<asp:TextBox id="txtZip" runat="server" /></asp:TextBox>
<asp:RegularExpressionValidator id="valZip" runat="server"
   ControlToValidate="txtZip"
   ErrorMessage="Invalid Zip Code" 
   ValidationExpression="[0-9]{5}" />

<script language=javascript>
// Call this function to do something
function txtZipOnChange() {
   // Do nothing if client validation is not active
   if (typeof(Page_Validators) == "undefined")  return;
       // Change the color of the label
       lblZip.style.color = valZip.isvalid ? "Black" : "Red";
}
</script>

You can also get an array of the validators on the page with the client function Page_Validators. There are a few more functions you can use.

Also you may use the ValidatorValidate(val) client function to force a check of each one indivually as well as ValidatorEnable(val, enable) to enable or disable validators as your logic demands.

Take a look at http://msdn.microsoft./en-us/library/aa479045.aspx#aspplusvalid_clientside for a bit more detail.

Hopefully this gets you where you need to go. If not, feel free to ask.

Previous Comment You can use an onClientClick and attach a JavaScript function. http://msdn.microsoft./en-us/library/7ytf5t7k.aspx

If you want to use jQuery, you can use ClientIDMode you are able easier to figure out control IDs.

Take a look at http://weblogs.asp/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx.

//Page_Validators is an array of validation controls in the page. 
if (Page_Validators != undefined && Page_Validators != null) 
{ 
    //Looping through the whole validation collection. 
    for(var i=0; i<Page_Validators.length; i++) 
    { 
        ValidatorEnable(Page_Validators[i]); 
        //if condition to check whether the validation was successfull or not. 
        if (!Page_Validators[i].isvalid) 
        { 
            break; 
        } 
    } 
}

//if condition to check whether the page was validated successfully. 
if(Page_IsValid) 
{ 
    alert('Success'); 
} 
else 
{ 
    alert('Failure'); 
}

Note the very last code example at the bottom of this page.