How to show regular expression validation's message after button click only? - asp.net

Question

Below is my html code. I have a email textbox and there is a login button. I have added a required field validator and regular expression validator for email textbox.
The problem is that when I type some thing in the email textbox browser's auto suggestion shows some list of emails. When I select any of those emails by using down arrow key and enter key it shows the error message for regular expression validation even though email is in proper format.
<asp:RequiredFieldValidator ID="reqValUserName" runat="server"
ErrorMessage="Email is required!"
ControlToValidate="txtUserName"
ValidationGroup="validateCredential"
Display="Dynamic">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regValUserName" runat="server"
ErrorMessage="Incorrect format!"
ControlToValidate="txtUserName"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="validateCredential"
Display="Static">
</asp:RegularExpressionValidator>
<asp:TextBox ID="txtUserName" runat="server"
TabIndex="1" CssClass="inputCredential" MaxLength="60"
AccessKey="E"
ValidationGroup="validateCredential">
</asp:TextBox>
<asp:Button ID="btnLogin" runat="server" CssClass="btnPrimary"
Text="Login" onclick="btnLogin_Click"
ValidationGroup="validateCredential"/>
In this image as you see if I select the email from the suggestion and press enter it is showing the wrong email validation message.
Can anyone please let me know, how to stop this kind of message display?
If there is any clarification needed regarding the question then please add it as a comment.

Answer 1

You could add the EnableClientValidation="false" attribute to the regex validator so that it only checks the format on the server after the other validators have been passed.
Or follow the advice here:
What determines the order validators fire in?

Answer 2

Also add regular expression validator
for email text box
<asp:RegularExpressionValidator ID="regtxtPrimaryEmail" runat="server" ControlToValidate="txtEmailId"
Display="Dynamic" CssClass="cssVal" ToolTip="Invalid email." ValidationGroup="registration"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
Then it will not submit until the email format correct.

Answer 3

It seems your some controls has autopostback="true" and your these controls are in update panel if not then what you can do is..Remove the display properties of all the validation controls and on btnLogin_Click Event call Validate(); Method.
Also read more In Depth detail on Validators on MSDN
you'll certainly get your answer....

Answer 4

Thanks for all your answers and suggestions.
Below is what I have done after going through all the answers.
<asp:RegularExpressionValidator ID="regValUserName" runat="server"
ErrorMessage="Incorrect format!"
ControlToValidate="txtUserName"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="validateCredential"
Display="Dynamic" EnableClientScript="false">
</asp:RegularExpressionValidator>
As you can see, I have added EnableClientScript="false" so that the error message will not be shown when I type half of email and select from auto suggestion and press enter.
Now the problem was it was always checking for whether entered credentials are correct of not as it was doing validation in server side. So I had some unnecessary code execution and database interaction.
So in click event handler of login button I did following change.
if(Page.IsValid)
{
// My credential check code
}
So the above block of code will run code for checking correctness of entered credentials only if they are in proper format.
But I am still looking for a better answer. This is only a work around. Because when it comes to performance server side validation can never match client side validation. Here I am compromising with usability. As I want user to be notified immediately after he/she enters a wrong formatted email. This can be achieved by using javascript, but I wonder if there is any way we can achieve it using validator controls..

Answer 5

This is happening because the client-side REV is validating on the partial input. For example, in the above illustration, the REV is validating "r" as its input. In order to verify this,
type in the entire email address "rupeshn#aol.com" >> then
select the suggested email using the down arrow >> then
hit the enter key.
The REV will not complain this time.
As for the solution: implement the REV in javascript. Add a label next to the textbox for error message. Call the js when the cursor exits the textbox. If the validation fails, find the label in the js and add the error message.

Answer 6

Just see the properties of the validator there you will find 'Display' property under Appearance section, set it to dynamic and VOLA!!