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.
There are errors
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="<br>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>