I believe that everyone has experienced filling in a form. If there are errord, it is annoying to find them. You know the error but you cannot find it right away. Highlighting an error field is the most preferred method for the end user. I did remember I created a similar solution in ASP before, but it required a lot of code to handle this eye-catching solution.
The built-in ASP.NET Validation Summary Control is good. It is easy for us to show a summary of errors in a form. However, it is difficult to search the invalid entries if we have got too many fields in a form. The best solution is to highlight the field if it is invalid. Recently, I developed this solution and would like to share it with you.
First of all, we need to create a control class to override the Validation Summary control.
public class SmartValidationSummary :
ErrorCssClass variable is created for defining the CSS class of a field when it is in error. We use the viewstate variable
ViewState["ErrorCssClass"] to store the CSS class.
Description("CSS class name applied to the invalid control.")
public string ErrorCssClass
object o = ViewState["ErrorCssClass"];
if (o != null)
return (string) o;
ViewState["ErrorCssClass"] = value;
On the pre-rendering process, we need to search through the form for the
RequriedFieldValidator and check for error.
protected override void OnPreRender(EventArgs e)
foreach(Control ctlForm in Page.Controls)
if (ctlForm.GetType() == typeof(HtmlForm))
ControlCollection ccForm = ctlForm.Controls;
foreach(Control ctlItem in ccForm)
if (ctlItem.GetType() == typeof(RequiredFieldValidator))
ControlToValidate is defined and it is a
TextBox, that means it is the target field that we need to control its appearance.
private void ProcessRequiredFieldValidator(Control ctlItem)
RequiredFieldValidator vdrItem = (RequiredFieldValidator)ctlItem;
if (vdrItem.ControlToValidate != string.Empty)
string strInvalid = vdrItem.ControlToValidate;
Control ctlToValidateItem = Page.FindControl(strInvalid);
if(ctlToValidateItem.GetType() == typeof(TextBox))
If there is an error in the
TextBox, we set the CSS class to the
ErrorCssClass and save the original CSS class to the viewstate variable. Otherwise, we need to restore it to the original state from the saved viewstate variable.
private void ProcessTextBox(Control ctlToValidateItem, bool boolIsValid)
TextBox txtItem = (TextBox)ctlToValidateItem;
if (ViewState[txtItem.ClientID + "CssClass"] != null)
txtItem.CssClass = ViewState[txtItem.ClientID + "CssClass"].ToString();
ViewState[txtItem.ClientID + "CssClass"] = null;
if (txtItem.CssClass != this.ErrorCssClass)
ViewState[txtItem.ClientID + "CssClass"] = txtItem.CssClass;
txtItem.CssClass = this.ErrorCssClass;
Installing the control
All you have to do is unzip the source file and copy the smart.dll file to your project \bin\ folder.
Using the control
- Add the smart.dll to your project references and register the smart.dll to the aspx page with the following code:
<%@ Register TagPrefix="Smart"
Namespace="Smart.Web.UI.WebControls" Assembly="Smart" %>
- Use the following code instead of the basic 'Validation Summary control' from ASP.NET. You need to specify the CSS class when there is an error in a required validator.
<smart:smartvalidationsummary id="SmartValidationSummary1" runat="server"
HeaderText="We're sorry. We need the following information ...">
- Define your
RequiredFieldValidator as usual but you have to disable the attribute
<asp:requiredfieldvalidator id="rfvFirstName" runat="server"
ErrorMessage="First Name" ControlToValidate="txtFirstName"
Note: If you still have difficulties to implement this solution, please refer to my demo project.
As this is a server-side only control, all validators using the smart Validation Summary must not be set to use the client script.
There are lots of enhancements required for this project. Following is my expectation:
- Using other validators are almost the same as the
RequiredFieldValidator. Although I only use
RequiredFieldValidator in this project, you can easily enhance it with other validators such as
RegularExpressionValidator or even custom validators.
- For my requirement, I only need to use the
TextBox control. Using the same concept, this validation summary control can also apply to other controls such as
- Jan 18, 2004: Released version 1.0.