In this article, we are going to learn how to use ASP.Net validation controls and show Validation Error Messages in popup. ASP.Net provides some built-in validation controls.

1. RequiredFieldValidator
2. RegularExpressionValidator
3. CompareValidator
4. RangeValidator
5. ValidationSummary
6. CustomValidator

Common properties for all the controls are -ControlToValidate and ErrorMessage. In this article, we are going to use all the validation controls except for CustomValidator. We will learn CustomValidator in later article.

Output:

First, I will show you the output of the program. First image shows aspx design and second images displays the validation error messages in popup on click of submit button.

In Designer file:

Below is the complete code of designer file.

DOCTYPE html>
html xmlns="http://www.w3.org/1999/xhtml">
head runat="server">
title>title>
style type="text/css">
td
{
border: 1px solid #000;
}
style>
head>
body>
form id="form1" runat="server">
br />
br />
div align="center">
table style="font-family: Arial;">
tr>
td>First Nametd>
td>
asp:TextBox ID="txtFirstName" runat="server">asp:TextBox>
asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ControlToValidate="txtFirstName" 
ErrorMessage="Enter your first name." Display="None">asp:RequiredFieldValidator>
td>
tr>
tr>
td>Last Nametd>
td>
asp:TextBox ID="txtLastName" runat="server">asp:TextBox>
asp:RequiredFieldValidator ID="rfvLastName" runat="server" ControlToValidate="txtLastName" 
ErrorMessage="Enter your last name." Display="None">asp:RequiredFieldValidator>
td>
tr>
tr>
td>E-Mailtd>
td>
asp:TextBox ID="txtEmail" runat="server">asp:TextBox>
asp:RequiredFieldValidator ID="rfvEmail" runat="server" ControlToValidate="txtEmail" 
ErrorMessage="Enter your E-Mail." Display="None">asp:RequiredFieldValidator>
asp:RegularExpressionValidator ID="revEmail" runat="server" ControlToValidate="txtEmail" 
ErrorMessage="Enter valid E-Mail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 
Display="None"> asp:RegularExpressionValidator>
td>
tr>
tr>
td>Passwordtd>
td>
asp:TextBox ID="txtPassword1" runat="server" TextMode="Password">asp:TextBox>
asp:RequiredFieldValidator ID="rqvPassword1" runat="server" ControlToValidate="txtPassword1" 
ErrorMessage="Enter password." Display="None">asp:RequiredFieldValidator>
td>
tr>
tr>
td>Repeat Passwordtd>
td>
asp:TextBox ID="txtPassword2" runat="server" TextMode="Password">asp:TextBox>
asp:CompareValidator ID="cvPassword" runat="server" ControlToValidate="txtPassword1" 
ControlToCompare="txtPassword2" Operator="Equal" Type="String" 
ErrorMessage="Password does not match." Display="None">asp:CompareValidator>
td>
tr>
tr>
td>Agetd>
td>
asp:TextBox ID="txtAge" runat="server">asp:TextBox>
asp:RequiredFieldValidator ID="rfvAge" runat="server" ControlToValidate="txtAge" 
ErrorMessage="Enter your age." Display="None"> asp:RequiredFieldValidator>
asp:RangeValidator ID="rvAge" runat="server" ControlToValidate="txtAge" 
ErrorMessage="Age should be between 20 to 35." MinimumValue="20" MaximumValue="35"
Display="None">asp:RangeValidator>
td>
tr>
tr>
td>Gendertd>
td>
asp:DropDownList ID="ddlGender" runat="server">
asp:ListItem Text="--Select--" Value="--Select--">asp:ListItem>
asp:ListItem Text="Male" Value="Female">asp:ListItem>
asp:ListItem Text="Female" Value="Female">asp:ListItem>
asp:DropDownList>
asp:RequiredFieldValidator ID="rfvddlGender" ControlToValidate="ddlGender" 
InitialValue="--Select--" runat="server" ErrorMessage="Select your gender" Display="None">
asp:RequiredFieldValidator>
td>
tr>
table>
asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
asp:ValidationSummary ID="VSummary" runat="server" ShowMessageBox="true" ShowSummary="false">
asp:ValidationSummary>
div>
form>
body>
html>

Explanation:

To show the validation error messages in popup, set ShowMessageBox="true" and ShowSummary="false" of ValidationSummary control and for remaining controls set Display="None".