ValidationSummary control in ASP.NET

ValidationSummary sever control in ASP.NET displays all the validation errors on the page at one place. ValidationSummary displays ErrorMessages of all the validation controls which fail to validate as summary

Properties of ValidationSummary control

ValidationSummary Example:

[code language=”html”]
<asp:ValidationSummary
ID="ValidationSummary1"
runat="server"
ShowMessageBox="true"
ShowSummary="true"
ForeColor="Red"
HeaderText="Error summary"
DisplayMode="BulletList"
CssClass="summary"/>
[/code]

Complete HTML source:

[code language=”html”]
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
input.textbox
{
border: 1px solid #BABABA;
color: #212121;
font-family: "Segoe UI Light";
font-size: 100%;
padding: 4px 8px;
width: 200px;
height: 22px;
margin-bottom: 5px;
}

input.button
{
background-color: Navy;
color: #FFFFFF;
font-family: "Segoe UI Light";
border: 0 none;
font-size: 110%;
height: 2.142em;
min-width: 6em;
line-height: 142%;
width: 100px;
margin-top: 5px;
}

label
{
color: #606060;
float: left;
font-family: "Segoe UI";
font-size: 85%;
padding-bottom: 4px;
padding-top: 10px;
text-align: left;
width: 150px;
}
.clear
{
clear: both;
}
.dropdown
{
width: 220px;
height: auto;
padding-bottom: 4px;
padding-top: 4px;
}
.radiobuttonlist
{
width: 220px;
height: auto;
border: 1px solid Navy;
}

.summary
{
border:2px solid Red;
width:220px;
}
</style>
<script type="text/javascript">
function ValidateUserName(source, arguments) {
if (arguments.Value.length >= 8 && arguments.Value.length <= 15) {
arguments.IsValid = true;
}
else {
arguments.IsValid = false;
}
}
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div style="width:400px; float:left;">
<div>
<asp:Label ID="lblName" runat="server" Text="Name" AssociatedControlID="txtName">
</asp:Label>
</div>
<div style="clear: both;">
</div>
<div>
<asp:TextBox ID="txtName" runat="server" CssClass="textbox">
</asp:TextBox>
</div>
<div class="clear">
</div>
<div>
<asp:Label ID="lblUserName" runat="server" Text="Username" AssociatedControlID="txtUserName">
</asp:Label>
</div>
<div class="clear">
</div>
<div>
<asp:TextBox ID="txtUserName" runat="server" CssClass="textbox">
</asp:TextBox>
<asp:CustomValidator ID="cvUserName" runat="server" ErrorMessage="Invalid username"
ControlToValidate="txtUserName" ClientValidationFunction="ValidateUserName" ForeColor="Red"
ValidateEmptyText="true" Display="Dynamic">
</asp:CustomValidator>
</div>
<div class="clear">
</div>
<div>
<asp:Label ID="lblEmail" runat="server" Text="Email" AssociatedControlID="txtEmail">
</asp:Label>
</div>
<div style="clear: both;">
</div>
<div>
<asp:TextBox ID="txtEmail" runat="server" CssClass="textbox">
</asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ControlToValidate="txtEmail"
ErrorMessage="Email is required" ForeColor="Red" Display="Dynamic">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmail" runat="server" ControlToValidate="txtEmail"
ErrorMessage="Invalid Email" ForeColor="Red"
ValidationExpression="\w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</div>
<div class="clear">
</div>
<div>
<asp:Label ID="lblAge" runat="server" Text="Age" AssociatedControlID="txtAge">
</asp:Label>
</div>
<div style="clear: both;">
</div>
<div>
<asp:TextBox ID="txtAge" runat="server" CssClass="textbox">
</asp:TextBox>
<asp:RequiredFieldValidator ID="rfvAge" runat="server" ControlToValidate="txtAge"
ErrorMessage="Age is required" ForeColor="Red" Display="Dynamic">
</asp:RequiredFieldValidator>
<asp:RangeValidator ID="rvAge" runat="server" ControlToValidate="txtAge"
Type="Integer" MinimumValue="18" MaximumValue="30" ErrorMessage="Age should be between 18 and 30"
ForeColor="Red" Display="Dynamic">
</asp:RangeValidator>
</div>
<div style="clear: both;">
</div>
<div>
<asp:Label ID="lblDOB" runat="server" Text="Date of Birth" AssociatedControlID="txtDOB">
</asp:Label>
</div>
<div style="clear: both;">
</div>
<div>
<asp:TextBox ID="txtDOB" runat="server" CssClass="textbox">
</asp:TextBox>
<asp:RequiredFieldValidator ID="rfvDOB" runat="server" ControlToValidate="txtDOB"
ErrorMessage="Date of birth is required" ForeColor="Red" Display="Dynamic">
</asp:RequiredFieldValidator>
<asp:RangeValidator ID="rvDOB" runat="server" ControlToValidate="txtDOB"
Type="Date" MinimumValue="01/31/1985" MaximumValue="01/31/2013" ErrorMessage="Invalid date"
ForeColor="Red" Display="Dynamic">
</asp:RangeValidator>
</div>
<div class="clear">
</div>
<div>
<asp:Label
ID="lblCountry"
runat="server"
Text="Country"
AssociatedControlID="ddlCountry">
</asp:Label>
</div>
<div style="clear:both;"></div>
<div>
<asp:DropDownList ID="ddlCountry" runat="server" CssClass="dropdown">
<asp:ListItem Value="-1" Text="Select Country"></asp:ListItem>
<asp:ListItem Value="1" Text="India"></asp:ListItem>
<asp:ListItem Value="2" Text="Australia"></asp:ListItem>
<asp:ListItem Value="3" Text="UK"></asp:ListItem>
<asp:ListItem Value="4" Text="USA"></asp:ListItem>
<asp:ListItem Value="5" Text="Canada"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator
ID="rfvCountry"
runat="server"
ErrorMessage="Country is required"
ControlToValidate="ddlCountry"
InitialValue="-1"
ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
<div class="clear"></div>
<div>
<asp:Label
ID="lblState"
runat="server"
Text="State"
AssociatedControlID="lbState">
</asp:Label>
</div>
<div style="clear:both;"></div>
<div>
<asp:ListBox ID="lbState" runat="server" CssClass="dropdown">
<asp:ListItem Value="1" Text="Rajasthan"></asp:ListItem>
<asp:ListItem Value="2" Text="Bihar"></asp:ListItem>
<asp:ListItem Value="3" Text="Delhi"></asp:ListItem>
<asp:ListItem Value="4" Text="Kerala"></asp:ListItem>
<asp:ListItem Value="5" Text="Jammu & Kashmir"></asp:ListItem>
</asp:ListBox>

<asp:RequiredFieldValidator
ID="rfvState"
runat="server"
ErrorMessage="State is required"
ControlToValidate="lbState"
InitialValue=""
ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
<div class="clear"></div>
<div>
<asp:Label
ID="lblCity"
runat="server"
Text="City"
AssociatedControlID="rblCity">
</asp:Label>
</div>
<div style="clear:both;"></div>
<div>
<div style="float:left;">
<asp:RadioButtonList ID="rblCity" runat="server" CssClass="radiobuttonlist">
<asp:ListItem Value="1" Text="Patna"></asp:ListItem>
<asp:ListItem Value="2" Text="Gaya"></asp:ListItem>
<asp:ListItem Value="3" Text="Bhagalpur"></asp:ListItem>
<asp:ListItem Value="4" Text="Muzaffarpur"></asp:ListItem>
<asp:ListItem Value="5" Text="Nalanda"></asp:ListItem>
</asp:RadioButtonList>
</div>
<div style="float:left; padding-left:5px;">
<asp:RequiredFieldValidator
ID="rfvCity"
runat="server"
ErrorMessage="City is required"
ControlToValidate="rblCity"
InitialValue=""
ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
</div>
<div class="clear"></div>
<div>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="button" />
</div>
</div>
<div style="clear:both; height:10px;"></div>
<div>
<asp:ValidationSummary
ID="ValidationSummary1"
runat="server"
ShowMessageBox="true"
ShowSummary="true"
ForeColor="Red"
HeaderText="Error summary"
DisplayMode="BulletList"
CssClass="summary"/>
</div>
</asp:Content>
[/code]

Errors are displayed in the ValidationSummary control as following when validation fails:

Message box is displayed with error summary as following when ShowMessageBox of the ValidationSummary control is set to “true”: