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.