Validation User Interface
Peter's Professional Validation provides the most complete formatting options for
validation on any platform. Use Peter's Professional Validation to do things that
are desirable but are otherwise impossible to do with Microsoft's validators.
A fundamental goal of Peter's Professional Validation is to make validation's User
Interface as good as the rest of your site's User Interface.
Error Formatters
Error messages or indicators can appear near the field with the error. Simply
place a Validator where you want the error to appear. Initially, the error message
is shown as a label on the page, just like Microsoft's validators do. However, that
can take up a lot of screen real estate. Users have developed other ways show
an error without using so much of the page, but it takes work in Microsoft's validators
to embed the necessary HTML into the ErrorMessage property.
Peter's Professional Validation separates the error messages from error formatting.
This makes it much easier to enter error messages as you don't think about embedding
HTML into them. Peter's Professional Validation supplies the following five Error
Formatters:
- Text – Like the Label webcontrol where you see the text with the styles of your
choosing. This ErrorFormatter has properties to easily add an image, HTML or text
before the error message and HTML after the error message.
- Popup - Pops up a callout with the error message when the mouse points to an image
and when the data entry control gets focus. It is similar to the AJAX Control ToolKit's
ValidationCalloutExtender.
This ErrorFormatter requires a license covering the Peter's More Validators module.
- Image with tool tip – Only show an image. Images can use much less space on the
page and will always use the same amount of space when used on multiple validators.
When the user points to the image, a tool tip exposes the error message.
- Image with Alert – Only show an image. When the user clicks on the image, an alert
shows the error message. The image has an optional tool tip to tell the user to
"click for more details".
- Hyperlink with Alert - Show a hyperlink with a static message like "Error". When
clicked, an alert shows the error message.
You can create your own ErrorFormatter classes as well.
Peter's Professional Validation provides an easy to use form in the Properties Editor
for choosing Error Formatters and setting properties. That form allows you to save
error formatters with new defaults so that developers will use a consistent look.
Indicating the Error Was Fixed
When there is no error shown, you can optionally show a graphic or text where the
ErrorFormatter normally appears to signal to the user that the field is valid. Each
validator includes the NoErrorFormatter property where you establish the appearance
and pick from one of these rules:
- Always show when there is no error. It will appear as the page is first displayed.
It will be removed as an error is revealed. It will return after the error is fixed.
- Show after the user fixes the error. It appears after the Validator displays the
error and the user corrects it.
- Show after the field has been validated and has no errors. The user does not have
to edit to cause this. For example, if a field requires text and opens with text
in the textbox, when the user clicks Submit, the RequiredTextValidator will validate
and the NoErrorFormatter appears.
- Show only on a new page, prior to any edits. It is hidden after validation occurs.
Never show on a post back page because validation has already occurred. It lets
you attract users to fields that have not been edited yet.
Getting The Users Attention
In addition to showing the error message, Peter's Professional Validation provides
several ways to get the users attention and assist them in responding to an error:
- Put the focus on the field with the error.
- Change the style of the field with the error. For example, change the background
to red.
- Change the style of labels or enclosing elements near the field with the error.
- Put up an alert box with the error message.
- Blink the error, whether its textual or an image, one or more times after the error
is detected.
ValidationSummary Control
The ValidationSummary Control appears when the user submits the page and errors
are found. It is a consolidated list of all error messages. Often users place it
near the top or bottom of their page. Each Validator control supplies the error
message to the ValidationSummary Control. The Validator Control has two messages
to offer: the one it uses at its own location or one specific to the ValidationSummary.
For example, while the Validator may put "Fix this error" next to the control with
the error, the ValidationSummary should get one with the field label: "Fix the Birthdate
field".
The ValidationSummary Control has extensive formatting options with many enhancements
over the one supplied by Microsoft.
CombinedErrorMessage Control
Often a data entry field needs several validators. For example, a textbox where
you expect a date within a range may have a RequiredTextValidator, DataTypeCheckValidator
(to confirm its a date), and a RangeValidator. Each of these will contribute its
own message to the page. When two or more of them are shown, it may use of more
screen real estate than you want. Peter's Professional Validation has two solutions:
The
MultiConditionValidator
lets you combine the conditions under one common error message. However, when you
will give the user less precise directions as one message must handle all the cases.
For a better user interface, use the CombinedErrorMessage control. It is like
a validator, but it uses the errors from other validators and appears
when any validators it's monitoring has an error to report. It supports the same ErrorFormatters
as validators.
ErrorMessage tokens, Localization and String Lookup
Error Messages are the text that is shown to the user when a condition indicates
the wrong data was found. There are two error messages on each validator: one shown
in the Error Formatter; the other shown in the ValidationSummary.
- Peter's Professional Validation supports tokens within the error messages. Tokens
really become powerful tools when your site must have consistent messages. Your
programmers must use the exact strings you define for each case. They simply setup
the properties appropriate for the condition and the label and let tokens embedded
in the error messages customize the text. The following are types of tokens:
- Values determined at runtime. For example, the TextLengthValidator offers the token
"{COUNT}". When found, it is replaced by the actual number of characters you typed.
The WordCountValidator, CountTrueConditionsValidator, and CountSelectionsValidator
all can show the count. The DifferenceValidator can show by how much the two fields
are apart. Most validators offer the "{TEXTVALUE}" token to show the current value
of the field within the error message.
- Values determined at design time in the control’s properties. For example, all
validators with a Minimum and Maxmium property offer the tokens "{MINIMUM}" and
"{MAXIMUM}".
- Often sentences that show a numeric value have to have two forms, one for singular
and one for plural usage of the number. ("There is 1 word." or "There are 2 words.").
Peter's Professional Validation offers tokens that allow you to define both the
singular and plural forms. For example, those with "{COUNT}" also support "{COUNT:singular:plural}".
Define the message like this: "There {COUNT:is:are} {COUNT} {COUNT:word:words}."
- You can define a label that names the field using the Validator's Label property.
Then use the "{LABEL}" token to show it in the error message. Labels can be actual
controls or text that you define within the Label property. Peter's Professional
Validation provides case changing rules to convert control fields to a more readable
format for the error message such as "lowercase", "uppercase", "sentence style",
and "title style".
- When using the Text Error Formatter, you can define style sheets that format many
of the tokens. For example, show the label with a different font.
You can define global styles for tokens so that the label, runtime and property
values stand out on the page.
- Peter's Professional Validation includes a "String Lookup System" where you can
define standard error messages in .resx files, a database, or other data sources.
When the programmer selects an error message, they use a "lookupID" to the error
message and never need to fill in the actual error message. Once done this way,
you can change the error messages in one place and update the entire site.
- With the String Lookup System, error messages can be localized. Use the .resx files,
a database, or other data source with the "lookupID" to define your messages in
multiple cultures.
- If you code your own validators, they can support more than one error message property.
You simply build a method that selects the desired error message given conditions
during validation.
Required Field Markers
One important aspect to a complete validation framework is the "required field marker".
Typical forms place a symbol, like "
*" or a small graphic,
next to each field that requires an entry. This is the required field marker. They
also place a description of the required field marker on the page.
Peter's Professional Validation supports the Required Field Marker in these ways:
- Use the RequiredFieldsDescription control to place the description of the marker
on the page. While it’s easy to define a text label, this control retrieves the
text from global values. This assures you that the description is standardized throughout
your site. It supports localization.
- Use the RequiredFieldMarker control to place the actual marker next to the field.
This standardizes the visual image, so that you define it once. The global definition
can be textual or an image. It supports localization.
- Each Validator includes the ShowRequiredFieldMarker property. When set to true,
it automatically inserts a RequiredFieldMarker control to its left.
- This product supplies this default marker image:
. You can define your own. Change
one global property and all RequiredFieldsDescriptions and RequiredFieldMarkers
will use yours.
Microsoft's validation framework does not offer anything like these features.
More Features
- When you submit the page, there is an option to automatically set the focus to
the first field with an error on the page.
- When you submit the page, there is an option to show an alert box a list of error
messages, similar to the ValidationSummary.
- When you add a Reset button to the page, a click on the Reset button will update
all validators so they reflect the original data in each field.
- When you have a license for the
Peter's Interactive Pages, you can add a Confirm prompt into the submit process.
- You can setup a validator to act as a warning instead of an error. It will display
on the page but not prevent submitting or stop you from saving the page.
Peter's Data Entry Suite gives you feature rich
and interactive data entry web forms with over 100 web controls.
Start with better controls. Finish with better sites. |
Try It
Buy It
|