Smart Validation Summary

• Download source files - 3.92 Kb
• Download demo project - 7.61 Kb

Overview

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.

Introduction

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.

The code

First of all, we need to create a control class to override the Validation Summary control.

public class SmartValidationSummary : 
        System.Web.UI.WebControls.ValidationSummary

The 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.

[
Bindable(true),
Category("Appearance"),
DefaultValue(""),
Description("CSS class name applied to the invalid control.")
]
public string ErrorCssClass
{
    get
    {
        object o = ViewState["ErrorCssClass"];
        if (o != null)
            return (string) o;
        else
            return String.Empty;
    }

    set
    {
        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))
                    ProcessRequiredFieldValidator(ctlItem);
            }
        }
    } 

    base.OnPreRender (e);
}

If the 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))
            ProcessTextBox(ctlToValidateItem, vdrItem.IsValid);
    }
}

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 (boolIsValid)
    {
        if (ViewState[txtItem.ClientID + "CssClass"] != null)
        {
            txtItem.CssClass = ViewState[txtItem.ClientID + "CssClass"].ToString();
            ViewState[txtItem.ClientID + "CssClass"] = null;
        }
    }
    else
    {
        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

1. Add the smart.dll to your project references and register the smart.dll to the aspx page with the following code:
   ASP.NET

   <%@ Register TagPrefix="Smart" 
          Namespace="Smart.Web.UI.WebControls" Assembly="Smart" %>

2. 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.
   ASP.NET

   <smart:smartvalidationsummary id="SmartValidationSummary1" runat="server" 
    CssClass="inputSummary" ErrorCssClass="inputError" 
    HeaderText="We're sorry.  We need the following information ...">
   </smart:smartvalidationsummary>

3. Define your RequiredFieldValidator as usual but you have to disable the attribute EnableClientScript.
   ASP.NET

   <asp:requiredfieldvalidator id="rfvFirstName" runat="server" 
    ErrorMessage="First Name" ControlToValidate="txtFirstName" 
    EnableClientScript="False">*</asp:requiredfieldvalidator>

Note: If you still have difficulties to implement this solution, please refer to my demo project.

Limitation

As this is a server-side only control, all validators using the smart Validation Summary must not be set to use the client script.

Further Enhancements

There are lots of enhancements required for this project. Following is my expectation:

1. Adding JavaScript code to handle the client-side validation will be in the next version of my project.
2. 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 CompareValidator, RegularExpressionValidator or even custom validators.
3. 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 DropDownList, RadioButton etc.

History

• Jan 18, 2004: Released version 1.0.