Show ValidationSummary ErrorMessage in popup in ASP.Net

 Print 
 Posted By :  ASPArticles
 Posted Date: Jun 13, 2016
 Category :  ,
 Post Hits : 313

In this article, we are going to learn how to use ASP.Net validation controls and show validation error messages in popup.

Related Articles

ASP.Net provides some built-in validation controls. They are as follows.

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.

ValidationSummary ErrorMessage in popup in asp.net
ValidationSummary ErrorMessage in popup in asp.net

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 Name</td>
<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 Name</td>
<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-Mail</td>
<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>Password</td>
<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 Password</td>
<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>Age</td>
<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>Gender</td>
<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".





blog comments powered by Disqus