Pimpin' Validation Summary With CSS

Posted on July 29, 2007  |  

Posted in Design

6 comments

Without any styling applied, ValidationSummary renders as a boring list with error messages. However, it’s easy to pretty it up with some CSS since it’s nothing more than a div with an unordered list inside.

I pretty much always put a validation summary in a master page and assign it a class:

<asp:ValidationSummary runat="server" 
    DisplayMode="BulletList" 
    CssClass="errors" />

Next, I’ll put it in a box with a red border an a humorous picture, plenty of which you can find for $1 at Stockxpert.

.errors {
 border: 2px solid red;
 color: red;
 margin: 5px 0px;
 padding: 15px;
 background: #fff url(../images/sad_server.gif) no-repeat 5px 50%;
}

The background image will appear 5px from the left edge of the summary and will always be centered vertically (it’s the “50%” part up there).

I will also knock out padding and margins on the error list and move it to the right far enough to sit next to the picture of a “sad server”:

.errors ul {
 margin: 0;
 padding: 0;
 margin-left: 80px;
 list-style: square;
}

The end result looks as follows:

Validation summary styled with CSS

There are many other ways to skin a validation summary. For example, if your pages have a fixed-width layout, you can shoot for a background image or two with rounder corners. The sky is the limit, as they say.

6 comments

pauldwaite
on July 30, 2007

Nice :)


Manuel
on July 30, 2007

Great idea, have copied that on my site!


matt
on June 18, 2008

thx for this. However. How do you change the colour of the text its self. I cant figure it

www.reabo.co.uk


Andy
on October 1, 2008

Matt: You can change the color with an ".errors li" selector.


London Freelancer
on November 29, 2009

Can we output this validation summary to a modal popup, instead of the dull alert box?


Milan Negovan
on November 29, 2009

I assume you mean a "modal" box built with JavaScript, right? You would need to hack Microsoft's validation scripts for that.