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 TextBox
es, a few RequiredFieldValidator
s, 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.
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 ((summary.showcustompopup == "True") &&
(typeof(summary.customurl) == "string"))
{
var width;
var height;
width = (typeof(summary.customwidth == "int") ? summary.customwidth : "200");
height = (typeof(summary.customheight == "int") ? summary.customheight : "200");
s = "";
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)) ? "" : "|");
s = summary.customurl + "?err=" + URLencode(s);
if (typeof(summary.icon) == "string")
s += "&icon=" + URLencode(summary.icon);
if (typeof(summary.customheader) == "string")
s += "&header=" + URLencode(summary.customheader);
if (typeof(summary.customtitle) == "string")
s += "&title=" + URLencode(summary.customtitle);
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:
Property |
Description |
showcustompopup |
Designates that the custom popup should be displayed. |
customurl |
The URL of the custom popup page. |
customwidth |
The width of the popup window. |
customheight |
The height of the popup window. |
customheader |
The header text at the top of the popup window. |
customtitle |
The text in the titlebar of the popup window. |
modal |
Whether to display popup as a modal form or not. Only works in IE 5.0+. |
icon |
The 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:
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.