Click here to Skip to main content
15,867,704 members
Articles / Web Development / HTML
Article

Custom Validation Summary in ASP.NET

Rate me:
Please Sign up or sign in to vote.
3.38/5 (17 votes)
22 Oct 20045 min read 283.1K   2.2K   47   16
Replace the ugly ValidationSummary control text with your own, customizable popup summary window.

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:

Sample screenshot

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.

The ugly 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:

Sample screenshot

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.

JavaScript
/* 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:

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

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

JavaScript
// 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:

PropertyDescription
showcustompopupDesignates that the custom popup should be displayed.
customurlThe URL of the custom popup page.
customwidthThe width of the popup window.
customheightThe height of the popup window.
customheaderThe header text at the top of the popup window.
customtitleThe text in the titlebar of the popup window.
modalWhether to display popup as a modal form or not. Only works in IE 5.0+.
iconThe icon to display in the popup.

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:

Custom Validation Summary

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Canada Canada
Jeff Shantz is a Programmer/Analyst for the Canadian subdiary of a large European corporation, with several years of experience in
C#.NET and ASP.NET, and many other years of experience in Java, C/C++, Visual Basic, and Pascal.

He enjoys blogging, coding, playing guitar, and discussing all things geek in the few moments of spare time he has between his
full-time job, and part-time Honors BSc - Computer Science studies at The University of Western Ontario.

Comments and Discussions

 
GeneralMy vote of 5 Pin
mpascu0126-Feb-11 6:38
mpascu0126-Feb-11 6:38 
QuestionAfter installing the page on server summary validation not workin Pin
gaurav.gupta0051-Apr-07 2:58
gaurav.gupta0051-Apr-07 2:58 
GeneralI have some doubts Pin
Medikonda17-Nov-05 19:25
Medikonda17-Nov-05 19:25 
Generalpop-window which shows errors Pin
Medikonda17-Nov-05 19:22
Medikonda17-Nov-05 19:22 
QuestionHow to create that pop-window which shows errors Pin
Medikonda17-Nov-05 19:19
Medikonda17-Nov-05 19:19 
Generalhelp Pin
MyDays21-Sep-05 10:04
MyDays21-Sep-05 10:04 
GeneralCustomized WebUIValidation.js Pin
Enrico Elizar Samuel27-Jun-05 18:36
Enrico Elizar Samuel27-Jun-05 18:36 
GeneralValidation is working but after validation form will not submit Pin
Munawar Ali11-Apr-05 3:31
Munawar Ali11-Apr-05 3:31 
GeneralRe: Validation is working but after validation form will not submit Pin
jeffshantz13-Apr-05 14:30
jeffshantz13-Apr-05 14:30 
GeneralPopup not popping-up Pin
Ric Castagna23-Feb-05 9:54
Ric Castagna23-Feb-05 9:54 
GeneralRe: Popup not popping-up Pin
jeffshantz13-Apr-05 14:33
jeffshantz13-Apr-05 14:33 
QuestionGoogle Toolbar/WinXP SP2 Popup blocker? Pin
Uwe Keim23-Oct-04 4:26
sitebuilderUwe Keim23-Oct-04 4:26 
AnswerRe: Google Toolbar/WinXP SP2 Popup blocker? Pin
jeffshantz23-Oct-04 10:41
jeffshantz23-Oct-04 10:41 
GeneralRe: Google Toolbar/WinXP SP2 Popup blocker? Pin
ptn7713-Apr-05 11:22
ptn7713-Apr-05 11:22 
GeneralRe: Google Toolbar/WinXP SP2 Popup blocker? Pin
jeffshantz13-Apr-05 14:32
jeffshantz13-Apr-05 14:32 
GeneralRe: Google Toolbar/WinXP SP2 Popup blocker? Pin
ptn7714-Apr-05 4:41
ptn7714-Apr-05 4:41 
I believe I would be using hidden frames instead of a popup cause I don't think there is a way around the popup blocker either.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.