Styling the ValidationSummary control using CSS only

 A requirment arised for presenting an ASP.NET page client side errors using the ValidationSummary as show in Fig (1), which is kind of outside the capabilities of what this control can do out of the box as it involves adding an image to each item or <li> element instead of the BulletList. I will use the same example I refered to In my previous post.

                                Fig (1) 

Let's take a closer look at the DisplayMode property of the ValidationSummary control and how it controls the ValidationSummary html output. I am using Firebug to view the rendered html:

1) DisplayMode="BulletList".

As per Fig (2), the output is rendered as an unordered list.

                                        Fig (2) 

2) DisplayMode="List"

As per Fig (3), the output is rendered as html text separated by <br /> tage.

                                Fig (3) 

3) DisplayMode="SingleParagraph",

As per fig(4) the output is rendered as one block of text.


                                                                       Fig (4) 

DisplayMode:BulletList (as in Fig (2)) above triggered the solution for me as I can re-style an Unorder list the way I like and this is what I did.

Therefore, by setting the CssClass of the ValidationSummary control to 'validated', that would re-style this control as was presented in Fig (1).

The CSS I used to style the ValidationSummary is as below:

Please if you are interested in having the project files, just drop me a comment and I will email it to you.




Published Tuesday, May 26, 2009 11:10 PM by ausideveloper


No Comments