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
Figure 6 - Two column layout