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:
- The user enters an email address inside the textbox
- Then the textbox loses focus (maybe use onTextChange event or onBlur with custom method)
- Check with the Validator first to require enter email or have a valid email according to expression
- After successful validation, it will fire a postback to the code behind that will perform validation in the database
- After checking, the result will be shown with an image in another UpdatePanel
- 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.