Monday, 13 June 2016

Show ValidationSummary ErrorMessage in popup in ASP.Net

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

Related Articles

  1. Simple registration form with client side validation in
  2. Simple registration form with server side validation in
  3. ASP.Net TextBox validation using JavaScript
  4. ASP.Net CustomValidator control to check valid E-Mail

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.


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
ValidationSummary ErrorMessage in popup in

In Designer File

Below is the complete code of designer file.

<!DOCTYPE html>
<html xmlns="">
<head runat="server">
<style type="text/css">
border: 1px solid #000;
<form id="form1" runat="server">
<br />
<br />
<div align="center">
<table style="font-family: Arial;">
<td>First Name</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>Last Name</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>
<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>
<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>Repeat Password</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>
<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"
<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:RequiredFieldValidator ID="rfvddlGender" ControlToValidate="ddlGender" 
InitialValue="--Select--" runat="server" ErrorMessage="Select your gender" Display="None">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
<asp:ValidationSummary ID="VSummary" runat="server" ShowMessageBox="true" ShowSummary="false">


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



Post a Comment

Email Subscription

Subscribe to our newsletter to get the latest articles directly into your inbox

Blog Archive