Custom Validation Summary in ASP.NET

• Download demo project - 32.2 Kb

Introduction

Validation is an extremely useful feature in ASP.NET. The powerful validation controls provided by Microsoft allow developers to easily validate form data with a minimal amount of code. More specifically, the ValidationSummary control provides an easy method of displaying a summarized list of all validation errors on a page. However, this control often presents errors in a fashion that is aesthetically incompatible with the rest of the page. It would be useful to be able to popup all validation errors in a window that could be custom-designed to match the theme of your site. With JavaScript and a few modifications to your <asp:ValidationSummary> tag, this is certainly possible. This article will show you how to make a customizable popup validation summary window, such as the following:

The "Ugly" ValidationSummary Control

So, you'd like to use validation on your ASP.NET page. You create your form, throw on a few TextBoxes, a few RequiredFieldValidators, and a ValidationSummary to polish off your user interface and provide a relatively friendly message to your users.

To your dismay, however, you find that the ValidationSummary is an ugly stain on your page. On the other hand, maybe you are fine with the look of the control, but simply don't have the spare screen real estate to host a ValidationSummary control.

What if there was a way to take all the messages from your validation controls, and pop them up into your own custom error window? It turns out, there are several ways to do this. Sure, you could set the ShowMessageBox property of the ValidationSummary control, but this is still rather ugly, and certainly not customizable:

Rather than rewriting the ValidationSummary server control, we'll utilize the existing control and some simple JavaScript, to produce our own custom error messages to notify the end-user of changes that are required to their form.

Modifying WebUIValidation.js

First of all, you'll need to find the WebUIValidation.js file. In ASP.NET 1.1, this should be located in the X:\Inetpub\wwwroot\aspnet_client\system_web\1_1_4322 directory. If you are running another version of ASP.NET, you may have to search for the file. Once found, open the file in your favorite editor.

Before we begin, we need to add a function in the file that will URL encode a string of text. This will ensure that no problems occur when we pass messages in the Query String. This function was borrowed from here.

/* URL encodes a string, making it suitable to pass in a query string.
Borrowed from http://www.rgagnon.com/jsdetails/js-0096.html. */
function URLencode(sStr) {
    return escape(sStr).replace(/\+/g, 
           '%2C').replace(/\"/g,'%22').replace(/\'/g, '%27');
}

We're going to concern ourselves only with the ValidationSummaryOnSubmit() function. This function is concerned with iterating through the various validation controls that you've placed on your ASP.NET form, and printing the error messages of those controls. In the function, you'll see the following condition statement:

if (summary.showmessagebox == "True") {

Right before that line is as good as any place to insert our code.

// If a custom popup is desired, and a URL was specified ... 

if ((summary.showcustompopup == "True") &&
    (typeof(summary.customurl) == "string"))
{
    var width;
    var height;

    // Width, height are passed in the customwidth and customheight properties.

    width = (typeof(summary.customwidth == "int") ? summary.customwidth : "200");
    height = (typeof(summary.customheight == "int") ? summary.customheight : "200");

    // The query string that will be passed to the custom URL.

    s = "";

    // Iterate through each error, adding them to s, and separating by a '|'.

        for (i=0; i<Page_Validators.length; i++) 
            if (!Page_Validators[i].isvalid && 
                 typeof(Page_Validators[i].errormessage) == "string") 
            s += (Page_Validators[i].errormessage) + 
                 ((i == (Page_Validators.length - 1)) ? "" : "|");

        // Build the query string.

    s = summary.customurl + "?err=" + URLencode(s);

    // If an icon was specified, add it to the query string.

    if (typeof(summary.icon) == "string")
        s += "&icon=" + URLencode(summary.icon);

    // If a header was specified, add it to the query string.

    if (typeof(summary.customheader) == "string")
        s += "&header=" + URLencode(summary.customheader);

    // If a page title was specified, add it to the query string

    if (typeof(summary.customtitle) == "string")
        s += "&title=" + URLencode(summary.customtitle);

    /* Check if the caller requested a modal dialog,
     * and use the appropriate method to open the window.  Note that 
     * modal dialogs currently only work in Internet Explorer 5.0+ */
    if (summary.modal == "True")
        window.showModalDialog(s,"","dialogWidth:" + width + 
               "px;dialogHeight:" + height + "px;status:no;");
    else
        window.open(s, null, "height=" + height + ",width=" + 
               width + ",status=no,toolbar=no,menubar=no,location=no");
}

Creating The Validated Form

Save the WebUIValidation.js and open Visual Studio .NET. Create a new ASP.NET Web Application, and add a few TextBox controls, and a Button control to a form. Make sure that you set the CausesValidation="True" property of the Button. Next, add a RequiredFieldValidator control for each TextBox that you have. Set their ErrorMessage properties to be descriptive messages (i.e., "First name cannot be blank."), and set their Text properties to simple asterisks ('*'). Also, be sure to set the ControlToValidate property of each validator to its respective control.

Finally, add a ValidationSummary control. Set both ShowMessageBox and ShowSummary to False. Now, switch to HTML mode and find the ValidationSummary tag. There are numerous properties that we've coded our ValidationSummaryOnSubmit() to accept and pass to the popup page:

A sample customized ValidationSummary tag is displayed below:

<asp:ValidationSummary class=code id=vsmSummary ForeColor="DarkRed" 
 runat="server" showcustompopup="True" customurl="Msgbox.aspx" 
 customwidth="225" customheight="250" customheader="Attention!" 
 customtitle="Error on Form" modal="True" icon="warning" ShowSummary="False"/>

The last thing that you need to do is to create the popup page -- the page that will popup and display the error message to the user. This is simply a matter of reading Request.QueryString values and formatting text. You can view this page in the code included with this article.

The above ValidationSummary tag will produce something similar to the following:

The Finished Product - Advantages and Disadvantages

So, now we have a customizable error message that does not alter or use up screen real estate on our form as the ValidationSummary control often does. There are, however, disadvantages to this technique. Obviously, if the end-user does not have JavaScript enabled, they will not receive a popup. However, this is increasingly less of a problem in this era, and the asterisks displayed beside each form field will still clue the user in on his or her error even if no popup is displayed.

Another perhaps more common problem is that of popup blockers. If the user has such a feature enabled, they may not see your popup. Once again, however, the asterisks displayed will help to alleviate this problem. Finally, if you attempt to display a modal popup, only users of Internet Explorer 5.0 or higher will receive it.

So there are both advantages and disadvantages to this method. While it may not be the best option for ensuring cross-browser compatibility, it can be a nice addition to a professional web site, allowing you to customize error messages to your site's theme, or perhaps display customized help based on the form fields that the user populated incorrectly.

View live demo.