Thursday 24 March 2011

Asp.Net Validations: Execute OnClientClick after Validator Controls completed their validations.

Hi,
Suppose you want to call a function using OnClientClick property of a button; but this call should be after your Asp.Net Validators validation is done, then you can use following approach:

In Short:
Instead of calling your javascript function directly call it using window.setTimeout with 0 millisec as,
<asp:Button ID="Button1" runat="server" Text="Button1" OnClientClick="window.setTimeout(TestValidation,0);"/>
OR (If need to pass parameters to your function)
<asp:Button ID="Button1" runat="server" Text="Button1" OnClientClick="window.setTimeout(function(){ TestValidation(param1, param2); },0);"/>


Your Client Side function:
function TestValidation() {

            //This is executed after your Validation

            if (Page_IsValid) {
                //Validation is successful
            }
            else {
                //Validation Failed
            }

}

In Long:
Lets demonstrate this:
1. Get a textbox control in your page, which will be validated.

 <asp:TextBox ID="txtName" runat="server"></asp:TextBox>

2. Get a RequiredFieldValidator for your TextBox to validate.
<asp:RequiredFieldValidator ID="rfvName" runat="server" ControlToValidate="txtName" ErrorMessage="Please enter a name" ValidationGroup="grpName"></asp:RequiredFieldValidator>

3. Get a button; on postback of which Validation is to be fired.
<asp:Button ID="btnShow" runat="server" Text="Show Name" OnClientClick="showName();" ValidationGroup="grpName" />

I have ValidationGroup property set to  grpName for Button and RequiredFieldValidator so that they belong to same group on Validation.

Now i want to show Name from TextBox  in alert only if RequiredFieldValidation is successful. i.e. Show Name from TextBox if it's not blank. To do this i have attached  showName() function to OnClientClick property of Button which is as:

function showName() {
            if (Page_IsValid) {
                var txtName = document.getElementById("txtName");
                alert(txtName.value);
            }

}
Note: Page_IsValid is a property exposed at client side to check status of Validations that is fired (similarly to property, Page.IsValid at server side)

Now when you run your page and click Show Name button without entering any text in TextBox, you will first see an alert which shows nothing and then ErrorMessage is displayed as "Please enter a name".
This means OnClientClick is executed before Validation is performed.

In order to get our function  showName to execute after Validation is performed you just have to change one thing:
<asp:Button ID="btnShow" runat="server" Text="Show Name" OnClientClick="window.setTimeout(showName,0);" ValidationGroup="grpName" />

Yes, Instead of directly calling your method in OnClientClick call it using window.setTimeout with 0 millisec as: OnClientClick="window.setTimeout(showName,0);"

Note: You can call your method with parameters using setTimeout: window.setTimeout(function(){ funcName(param1, param2, ...); },0);

Now on click of button Show Name you will only see an alert if Textbox contains any text else you will see an ErrorMessage (without any alert).










4 comments:

  1. Thank you so much............

    ReplyDelete
  2. Thank you so much.. I was just wondering if i can use (Page_ClientValidate() == true) as well ?? It performs the same thing or does it do different operations behind the scene ?

    ReplyDelete
    Replies
    1. Hey Puneet Garg... Removing ValidationGroup="grpName" from button and validating explicitly using Page_ClientValidate() in your javascript function will work.

      Delete