ASP .NET - A ValidationSummary with some style

Using the built-in ASP .NET validation controls makes validation a breeze. The controls are an easy and powerful way to validate form data client-side and server-side. If you need to display a summarized list of all the validation errors on a page you can use the ValidationSummary control. Unfortunately, as with most out of the box controls, you'll have to sacrifice the ability to style it exactly how you want.


Figure 1 - Boring ol' ValidationSummary

Figure 1 shows the ValidationSummary consists of two parts: the header text, and the error messages. The control does not allow you to specify a custom css class for either of these text elements, nor does it allow you to specify an image. So, how do you create a ValidationSummary with some style?


Figure 2 - Stylin' and profilin'

A few weeks ago I was asked to create something similar to figure 2. I wanted to avoid creating a custom control because I wasn't adding any functionality. Moreover, creating a custom control from scratch or extending the existing ValidationSummary meant I'd have to code both the client-side and server-side functionality -- I really didn't want to touch WebUIValidation.js.

To start, I played with the header text to see if I could inject some HTML, and I could.


Figure 3 - Injecting HTML into the HeaderText

Injecting HTML allowed me to wrap the header text and error messages in span tags and assign a css class as shown above. Next, I needed to add an image to the ValidationSummary.

My first attempt at adding an image to the ValidationSummary was to set the CssClass for the control and use the image as the background-image of the div. I used the following css:


Figure 4 - Setting the image as the background

It worked! But, when I tested different display modes and edge cases I found, in certain situations, the error messages would not align correctly. I couldn't fix this because I had no way of wrapping all the error messages in a div. I also tried adding the image using HTML in the header text but ran into a similar problem.


Figure 5 - Alignment problem 

To fix the alignment problem I created a two column layout. I placed the image in the left column and the ValidationSummary in the right column. Next I whipped up some Javascript to tie the image and ValidationSummary together so they would show/hide in unison.


Figure 6 - Two column layout 


Figure 7 - Javascript to show/hide image

I used the client-side method Page_ClientValidate which let me test if my controls met the validation criteria. In this case I also passed a validation group so it didn't interfere with any other validation on the page. I hooked up my button's OnClientClick to call the Javascript and there it was...a ValidationSummary with some style.

One word of caution, since the image is only tied to the ValidationSummary using Javascript you'll need to write some server-side code to show/hide the image in case the user has disabled Javascript.

4 Comments

  • To wrap the ValidationSummary of header text in a MessageBox use:

    validationSummary1.HeaderText = "Here's one lineAHere's the other line";

  • Excellent work done.

  • Good stuff mate.

  • I don't get it...why all of the extra markup? Your solution works, but has to be done on every page you put a ValidationSummary on, meaning it is hard to maintain.

    First of all, I was able to achieve this effect by adding 2 span elements directly to the HeaderText property and using CSS on the control. I am not sure which edge cases you are referring to, but the CSS on the following site works fine: http://blog.coreycoogan.com/2009/11/02/adding-icons-to-validationsummary-and-information-boxes-with-jquery/ (although I prefer not to require javascript for the solution).

    Anyway, another approach not considered here (if using at least ASP.NET 2.0) is to use a control adapter to rewrite the output and add the spans and divs as needed. This will work site wide for the ValidationSummary control. More info can be found here: http://weblogs.asp.net/scottgu/archive/2006/09/08/CSS-Control-Adapter-Toolkit-Update.aspx

    Finally, I don't understand why you think you would need to modify any javascript to get this done. The most straightforward approach is to inherit from ValidationSummary and override the render method. Even if you did want to "modify" the javascript this can be done without actually changing the output of the .NET framework using this javascript technique:

    (function() {
    // keep the original function
    var ml_orig_WebForm_DoPostBackWithOptions = WebForm_DoPostBackWithOptions;
    WebForm_DoPostBackWithOptions = function(options) {

    // This intercepts the call to the javascript function generated by .NET
    // Do whatever you want here before cascading the call
    ml_orig_WebForm_DoPostBackWithOptions(options);
    }
    })();

    The only requirement is that this must physically appear after the declaration of the original function in the page.

Comments have been disabled for this content.