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.