How to use ValidationSummary control in asp.net

ValidationSummary web server control

ValidationSummary control allows us to display the summary of all validation errors. We can display validation errors summary inline of a web page or a message box or both by using ShowMessageBox and ShowSummary property value true or false. We can display validation messages as bulleted lists, single paragraphs, or only lists based on DisplayMode.

We can set a header text for the validation summary. ASP.NET ValidationSummary control has many properties to design the error messages text as fore color, back color, border color, border style, border width, theme, skin, and after all CSS class.

ValidationSummary allows a summary of all validation error messages from all validators in a single location. This example shows you how can we display all validation error messages as a summary using the ValidationSummary control.

Here we use three text boxes and make them required fields using RequiredFieldValidator control. When someone submits the form without entering TextBoxes value, he got a validation error message summary in one location as a bulleted list.

ValidationSummaryExample.aspx


<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">
    protected void Button_Submit_Click(object sender, System.EventArgs e)
    {
        Label_Message.Text = "Your submitted info....<br />" +
            "Name : " +
            TextBox_FirstName.Text.ToString() + " " +
            TextBox_LastName.Text.ToString() +
            "<br />City: " +
            TextBox_City.Text.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to use ValidationSummary control in asp.net</title>
</head>
<body style="padding:25px">
    <form id="form1" runat="server">
    <div>
        <h2 style="color:MidnightBlue; font-style:italic;">      
            How to use ValidationSummary control
        </h2>      
        <hr width="450" align="left" color="Gainsboro" />
        <asp:Label
            ID="Label_Message"
            runat="server"
            Font-Bold="true"
            Font-Names="Comic Sans MS"
            ForeColor="OliveDrab"
            Font-Italic="true"
            Font-Size="X-Large"
            />
        <asp:ValidationSummary 
            ID="ValidationSummary1" 
            runat="server" 
            HeaderText="Following error occurs....." 
            ShowMessageBox="false" 
            DisplayMode="BulletList" 
            ShowSummary="true"
            BackColor="Snow"
            Width="450"
            ForeColor="Red"
            Font-Size="X-Large"
            Font-Italic="true"
            />
        <br /><br />
        <asp:Label 
            ID="Label_FirstName" 
            runat="server" 
            Text="First name" 
            AssociatedControlID="TextBox_FirstName"
            Font-Bold="true"
            Font-Size="Large"
            ForeColor="Navy"
            />
        <asp:TextBox 
            ID="TextBox_FirstName" 
            runat="server"
            Font-Bold="true"
            Font-Size="Large"
            Height="30"
            BackColor="Gold"
            Font-Names="Courier New"
            />
        <asp:RequiredFieldValidator
             ID="RequiredFieldValidator1"
             runat="server"
             ControlToValidate="TextBox_FirstName"
             ErrorMessage='Input your first name.'
             EnableClientScript="true"
             SetFocusOnError="true"
             Text="*"
             >
        </asp:RequiredFieldValidator>
        <br /><br />

        <asp:Label 
            ID="Label_LastName" 
            runat="server" 
            Text="Last name" 
            AssociatedControlID="TextBox_LastName"
            Font-Bold="true"
            Font-Size="Large"
            ForeColor="Navy"
            />
        <asp:TextBox 
            ID="TextBox_LastName" 
            runat="server"
            Font-Bold="true"
            Font-Size="Large"
            Height="30"
            BackColor="Gold"
            Font-Names="Courier New"
            />
        <asp:RequiredFieldValidator
             ID="RequiredFieldValidator2"
             runat="server"
             ControlToValidate="TextBox_LastName"
             ErrorMessage='Input your last name.'
             EnableClientScript="true"
             SetFocusOnError="true"
             Text="*"
             >
        </asp:RequiredFieldValidator>
        <br /><br />

        <asp:Label 
            ID="Label_City" 
            runat="server" 
            Text="City" 
            AssociatedControlID="TextBox_City"
            Font-Bold="true"
            Font-Size="Large"
            ForeColor="Navy"
            />
        <asp:TextBox 
            ID="TextBox_City" 
            runat="server"
            Font-Bold="true"
            Font-Size="Large"
            Height="30"
            BackColor="Gold"
            Font-Names="Courier New"
            />
        <asp:RequiredFieldValidator
             ID="RequiredFieldValidator3"
             runat="server"
             ControlToValidate="TextBox_City"
             ErrorMessage='Input your city.'
             EnableClientScript="true"
             SetFocusOnError="true"
             Text="*"
             >
        </asp:RequiredFieldValidator>
        <br /><br />
        <asp:Button 
            ID="Button_Submit" 
            runat="server" 
            Text="Submit" 
            OnClick="Button_Submit_Click"
            Font-Bold="true"
            Font-Size="Large"
            ForeColor="DodgerBlue"
            Font-Names="Monaco"
            Height="45"
            Width="350"
            />
        <br /><br />
    </div>
    </form>
</body>
</html>