Home     About PeterBlum.com     Policies     Download a Licensed Product     Newsletter
Peter's Professional Validation
ValidationSummary Control

Peter's Professional Validation provides a ValidationSummary Control. Like the one supplied with the Microsoft's validation framework, it appears when the user submits and errors were found. It shows the error messages found throughout the page in one place. The following are features of the ValidationSummary control:

Note: Items marked * are not in Microsoft's ValidationSummary.

  • You can define a header and footer* text string and control the horizontal alignment*.
  • * The header supports an optional image and includes formatting rules where to position the image against the text.
  • The error messages can be shown with the following styles:
    • List – Each message is on its own line. You can define text that precedes each message such as a dash ("-")*.
    • BulletedList – A list of messages that uses the HTML tags: <ul> or <ol>. You determine what symbol precedes each message: circle, disc, square, alphabetic, numeric, and roman.*
    • Single line – Each message is built into one paragraph. You can define the text that separates each message such as a semicolon or space.*
    • Table* - Alternative rows have different style sheets so they stand out.
    • None* - Don't show the error messages at all. It's common for users to want to only show the header text merely to remind users to go through the page and fix errors shown next to the data entry controls.
  • * Each error message can optionally support a hyperlink. When clicked, the focus is moved to the first field associated with the error message.
  • * There are separate style classes for the overall validation summary and the error messages. It’s all placed into a <DIV> control to allow you to develop nice borders and backgrounds.
  • * Validators can be marked to use an alternative style sheet to make them stand out within the list of error messages. For example, change the color on each required field validator.
  • * Since the ValidationSummary may appear on a very tall web form, users may not always see it. The ValidationSummary can be connected to another field on the form that is shown and hidden simultaneously with the ValidationSummary. For example, define a Label with the text “There are errors on the page” on the opposite side of the form. Or use this feature to add other elements around the ValidationSummary that are not built into the control, such as an enclosing table.
  • * Use the AutoUpdate property to interactively change the ValidationSummary as the user corrects the fields. Once the ValidationSummary is shown, each field change validation will also redraw the ValidationSummary. This way, users can see their progress in correcting the errors.
  • * Use the ScrollIntoView property to make the page scroll to show the ValidationSummary when it appears.
  • * If you have different validation groups, you may want multiple ValidationSummary controls. A ValidationSummary can show any specific group or all groups at once.
  • * Supports localization through the built-in string lookup system. It supports resource files, databases and custom string sources.

ValidationSummary Control Demos

This page uses the fields below to establish the error messages for each validation summary shown in the various Demos below. Click Submit to get started.


First name
Age
 

Demo 1

This is the default ValidationSummary. It lacks a header and uses bullets to show error messages. Notice that the error messages are slightly different from those shown next to the fields. Each Validator control allows you to supply a unique error message for the ValidationSummary. That message supports tokens and token style sheet features.


ASP.NET Syntax for this demo

<des:ValidationSummary id="Validationsummary1" runat="server"></des:ValidationSummary>

Demo 2

This ValidationSummary includes a header and footer. It uses the paragraph style to show error messages. The header includes an image. Unlike the header on Microsoft's ValidationSummary, you can format the image and the text of the header as properties without encoding the HTML yourself. Colors, borders, and width properties have also been set.


ASP.NET Syntax for this demo

<des:ValidationSummary id="ValidationSummary2" runat="server"
    DisplayMode="SingleParagraph" HeaderText="Please fix these errors" 
    HeaderImageURL="{APPEARANCE}/Validation/valerroricon_animated.GIF"
    HeaderImageColumnWidth="20px" FooterText="&lt;br&gt;The page will not submit until these are corrected."
    Width="300px" BorderStyle="Dashed" BorderColor="RosyBrown" BorderWidth="4px" BackColor="SeaShell">
</des:ValidationSummary>

Demo 3

This looks like the default ValidationSummary. However, it has three unique properties:

  • It shows hyperlinks on the error messages. Click on them to jump to the textbox with the error.
  • It causes another field on the page to show. In this case, it is a Label control with the text "There are errors" just above the textboxes.
  • As you fix the errors above, it immediately refreshes to show the impact of your edits.

ASP.NET Syntax for this demo

<des:ValidationSummary id="ValidationSummary3" runat="server"
    RelatedControlID="WarningLabel" AutoUpdate="True" HyperLinkToFields="True">
</des:ValidationSummary>