Updated March 30, 2023
Introduction to ASP.NET ValidationSummary
A ValidationSummary server control is a control that displays a consolidated summary of all the errors in the form of data for the user to rectify. The errors can be listed either against their respective controls, or in a message box, or both. Thus, the application developer can make the web page more user-friendly by guiding the user to resolve the errors before posting the form.
Why did I use the term server control? Well, because like all other server controls, ASP.NET provides its own tag for the ValidationSummary control which is run at the server and the generated HTML code is returned as a response to the browser.
So, thinking from an HTML perspective, the ValidationSummary control generates the HTML div tag, which encloses an unordered list of all the validation errors in the form.
Syntax
The ValidationSummary control can either be coded using ASP.NET provided tags or dragged and dropped using Visual Studio IDE. The drag and drop feature ultimately generates the same code. The syntax of ASP.NET ValidationSummary in its simplest form is:
<asp:ValidationSummary ID="ValidationSummaryId" runat="server" />You can drag and drop the ValidationSummary control from the toolbox pane in Visual Studio:
Code:
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />The generated HTML code:
Behind the Scenes
So, how does the ValidationSummary control work? When the ASP.NET engine encounters the control, it adds the equivalent HTML tag in the response with its hidden property initially set to true. The validation is triggered whenever a user tries to post the form data to the server. If there are errors in the form, a summary of all the errors is displayed either as a bulleted (unordered) list or in a message(alert) box.
Where does the summary of all the errors come from? Now that’s a good question. The summary is fetched from the ErrorMessage property of various validation controls in the form.
But wait, the same message is displayed by all the validation controls. Then what is the need for a summary? Here comes the Text property in play. All the validation controls have two properties – ErrorMessage and Text. When the Text property is not set to any value, the ErrorMessage value is displayed in the controls. So, as a good coding practice, the Text property is used to bring the attention of the user that there is some error in this field. A more elaborative description of the error should be in the ErrorMessage property, which is then displayed in the summary.
Properties to ASP.NET ValidationSummary
The ASP.NET ValidationSummary control comes with certain pre-defined properties. These properties are converted to attributes in the native HTML code. They help define additional behavior for the ValidationSummary control. Let’s discuss some of the frequently used ones in detail:
1. BackColor, ForeColor
This property gets or sets the background and the foreground color of the control.
<asp:ValidationSummary ID="myValidationSummary" BackColor="DarkBlue" ForeColor="White" runat="server" />2. BorderColor, BorderStyle and BorderWidth
These properties get or set the border styling for the control.
<asp:ValidationSummary ID="myValidationSummary" BorderWidth="5" BorderColor="Blue" BorderStyle="dashed" runat="server" />3. CssClass
This property gets or sets the CSS class to be applied to the control.
<asp:ValidationSummary ID="myValidationSummary" CssClass="txtBxClass" runat="server" />4. Enabled
This property gets or sets the value indicating whether the control is enabled or disabled. The default value is true.
<asp:ValidationSummary ID="myValidationSummary" Enabled="false" runat="server" />5. EnableClientScript
This property gets or sets the value indicating whether client-side scripting is enabled or disabled. When enabled, the validation checks are performed at the browser itself before posting data to the server. When disabled, the validation checks are performed at the server and error is returned in the response if validation fails. The default value is true.
<asp:ValidationSummary ID="myValidationSummary" EnableClientScript="false" runat="server" />6. Font
This property gets or sets the font of the text to be displayed in the control. There are plenty of styles and options such as bold, italics, underline, strikeout, etc.
7. Height, Width
These properties get or set the height and width of the control in the number of pixels.
<asp:ValidationSummary ID="myValidationSummary" Height="100" Width="500" runat="server"/>8. ID
This property gets or sets the unique identifier attribute to the control.
<asp:ValidationSummary ID="myValidationSummary" runat="server" />9. ShowMessageBox, ShowSummary
These properties determine whether the validation summary is displayed in the web page or in a message box or both.
<asp:ValidationSummary ID="myValidationSummary" ShowMessageBox="true" ShowSummary="false" runat="server" />10. ShowValidationErrors
This property determines whether to display the validation summary or not.
<asp:ValidationSummary ID="myValidationSummary" ShowValidationErrors="false" runat="server" />11. Visible
This property determines whether the control will be displayed on the UI or hidden. The default is true.
<asp:ValidationSummary ID="myValidationSummary" Visible="false" runat="server" />Examples to Implement ValidationSummary
Let us create sample application step by step.
Step 1: Create a new ASP.NET WebApplication project. This will create a shell template with a working application with a Default.aspx and Default.aspx.cs page. The .cs page is the code behind page for the .aspx page.
Step 2: Go to the Default.aspx file and remove the contents of the shell template. Paste the following code:
Code:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SampleWebApplication._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<br /><br />
<asp:Label ID="name_lbl" runat="server">Enter Name</asp:Label>
<asp:TextBox ID="name_txt" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="Name_Required" runat="server"
ControlToValidate="name_txt" ForeColor="DarkRed"
Text="Required!" ErrorMessage="Please enter your Name." >
</asp:RequiredFieldValidator>
<br /><br />
<asp:Label ID="email_lbl" runat="server">Enter Email ID</asp:Label>
<asp:TextBox ID="email_txt" TextMode="Email" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="Email_Required" runat="server"
ControlToValidate="email_txt" ForeColor="DarkRed"
Text="Required!" ErrorMessage="Plese enter an Email ID." >
</asp:RequiredFieldValidator>
<br /><br />
<asp:Label ID="pass_lbl" runat="server">Enter Password</asp:Label>
<asp:TextBox ID="pass_txt" TextMode="Password" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="Pass_Required" runat="server"
ControlToValidate="pass_txt" ForeColor="DarkRed"
Text="Required!" ErrorMessage="Please enter a password." >
</asp:RequiredFieldValidator>
<br /><br />
<asp:Label ID="Label1" runat="server">Re-Enter Password</asp:Label>
<asp:TextBox ID="repass_txt" TextMode="Password" runat="server"></asp:TextBox>
<asp:CompareValidator ID="Repass_Compare" runat="server"
ControlToValidate="repass_txt" ControlToCompare="pass_txt"
Text="Passwords do not match!" ErrorMessage="The passwords do not match."
ForeColor="DarkRed">
</asp:CompareValidator>
<asp:ValidationSummary ID="ValidationSummary_SignupForm"
ShowMessageBox="true" ShowSummary="false"
HeaderText="Please correct the following errors in the page." runat="server" />
<br /><br />
<asp:Label ID="msg" runat="server" Text=""></asp:Label>
<br /><br />
<asp:Button ID="Validate_btn" runat="server" OnClick="Validate_btn_Click" Text="Validate" />
</asp:Content>Step 3. Copy the below code in your Default.aspx.cs file.
Code:
using System;
using System.Web.UI;
namespace SampleWebApplication
{
public partial class _Default : Page
{
protected void Validate_btn_Click(object sender, EventArgs e)
{
// This check is useful when client side scripting is disabled.
// It checks page validations on server to prevent any harmful data being posted.
if (Page.IsValid) {
msg.Text = "Account created successfully.";
}
}
}
}Step 4: Run the application. Below is the output of your code. It has a form and respective validation controls along with a validation summary control.
- The code-behind file has a button click function to the Validate button. This method is called only when all the validation checks pass.
- The above is the landing page of your application. Click on the Validate button without entering any value in the fields.
- The validation summary is displayed with all the errors, and no call is made to the code behind the function.
- When the values are entered, the validations are re-checked, and errors are displayed, if any.
- After correction of errors, click on the Validate button and the code behind the function is executed.
Conclusion
Voilla! You have successfully learned the ASP.NET ValidationSummary control. To get more advanced training on some of the advanced properties and code behind logics, the official Microsoft documentation is highly recommended.
Recommended Article
We hope that this EDUCBA information on “ASP.NET ValidationSummary” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
