CODEWITHSUNDEEP
validationtextboxasp.net-ajaxupdatepanelasp.net-4.0
Dev
Dev

Reputation: 23

ASP.NET: an UpdatePanel with a TextBox that need Validation

I have a situation that a textbox inside UpdatePanel that enter email needs to be validated with : - RequiredFieldValidator - RegularExpressionValidator

Each of these validator has a ValidatorCalloutExtender to callout the error message outside of it's UpdatePanel.

I have search for solution on Internet, but from my research it seems that the UpdatePanel is not compatible with Validator. I found one solution, which is to Create Custom onBlur Textbox (Extending the asp.net textbox...). However I would prefer a simpler solution that doesn't require as many code changes.

Here is the my asp.net code:

E-mail:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
   <ContentTemplate>
      <asp:TextBox ID="txtLoginPageRegisterEmail" runat="server" MaxLength="33" TabIndex="4" BackColor="#DBDBDB" size="40" BorderWidth="0px" AutoPostBack="true" OnTextChanged="txtLoginPageRegisterEmail_TextChanged"></asp:TextBox>
   </ContentTemplate>
   <Triggers>
      <asp:AsyncPostBackTrigger ControlID="txtLoginPageRegisterEmail" />
   </Triggers>
</asp:UpdatePanel>
<asp:RequiredFieldValidator ID="RFVEmail" runat="server" Display="None" ValidationGroup="Registration" ErrorMessage="Email is required." ControlToValidate="txtLoginPageRegisterEmail"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="VCEEmail_ClientState" runat="server" TargetControlID="RFVEmail"></asp:ValidatorCalloutExtender>
<asp:RegularExpressionValidator ID="REVEmail" runat="server" Display="None" ErrorMessage="Please Enter valid Email" ControlToValidate="txtLoginPageRegisterEmail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="Registration"></asp:RegularExpressionValidator>
<asp:ValidatorCalloutExtender ID="VCEEmail2_ClientState" runat="server" TargetControlID="REVEmail"></asp:ValidatorCalloutExtender>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate></ContentTemplate>
</asp:UpdatePanel>

Here is my code behind in VB :

Protected Sub txtLoginPageRegisterEmail_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    Dim img As Image = New Image
    If (chkEmail()) Then
        img.ImageUrl = "~/images/login_pg/reg/r.gif"
    Else
        img.ImageUrl = "~/images/login_pg/reg/x.gif"
    End If

    If (String.IsNullOrEmpty(txtLoginPageRegisterEmail.Text)) Then
        UpdatePanel2.ContentTemplateContainer.Controls.Clear()
    Else
        UpdatePanel2.ContentTemplateContainer.Controls.Add(img)
    End If
End Sub

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
    ScriptManager.GetCurrent(Me).RegisterAsyncPostBackControl(txtLoginPageRegisterEmail)
End Sub

The chkEmail() calls a Stored Procedure to check the email address and return a boolean based on the result.

The first time it will show an error message if I enter an invalid email, but at the same time it will postback and update the UpdatePanel2 that shows the correct image. After that, clear out the text, and enter an invalid email again. It won't show the error message from the validator anymore.

I want the email textbox to check and postback to the code behind to validate the email address with the following steps. Now what I want is the email textbox first to check and will postback to code behind to check either this email is available or not, so the step that i wish to do is:

  1. The user enters an email address inside the textbox
  2. Then the textbox loses focus (maybe use onTextChange event or onBlur with custom method)
  3. Check with the Validator first to require enter email or have a valid email according to expression
  4. After successful validation, it will fire a postback to the code behind that will perform validation in the database
  5. After checking, the result will be shown with an image in another UpdatePanel
  6. If the user clears the text in textbox, it will clear the image and no error message will show or just the error message from RequiredFieldValidator.

Upvotes: 2

Views: 9425

Answers (1)

Pankaj Kumar
Pankaj Kumar

Reputation: 1768

Firstly, Put all the validators including extenders inside updatepanel.

Secondly, set validation group on your textbox also since it is being used to post to the server and lastly and most importantly set CausesValidation=true on your textbox(default is false)

Also on a side note you dont need to set your textbox as asyncpostback trigger control for the update panel it is in. by defaut ChildrenAsTriggers is true meaning if postbacks come from children it will cause the update panel to refresh.

phew, it took me around 1 hour to figure that causes validation was set to false and i was like "why is it not working?"

Upvotes: 2

Related Questions