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
Property Uses
DisplayMode Gets or sets display mode of the ValidationSummary control. It can be set to BulletList, List or SingleParagraph. Default value is BulletList.
ShowMessageBox  Gets or sets a Boolean value which specifies whether an alert message will be displayed with error summary when validation fails.
ShowSummary Gets or sets a Boolean value which specifies whether the ValidationSummary control will be displayed with error summary when validation fails.
HeaderText Gets or sets text which is displayed as header in the ValidationSummary when validation fails.
ErrorMessage Gets or sets error message displayed when validation fails
ValidationSummary Example:
<asp:ValidationSummary
    ID="ValidationSummary1"
    runat="server"
    ShowMessageBox="true"
    ShowSummary="true"
    ForeColor="Red"
    HeaderText="Error summary"
    DisplayMode="BulletList"
    CssClass="summary"/>
Complete HTML source:
<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>

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

ValidationSummary Error Summary

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

Leave a Reply

Your email address will not be published. Required fields are marked *