Home     About PeterBlum.com     Policies     Download a Licensed Product     Newsletter
Peter's Professional Validation
Validation User Interface
Back
Jump to: Error Formatters | Getting the User's Attention  | ValidationSummary Control  | CombinedErrorMessage control
Tokens, Localization, and String Lookup |  Required Field Markers |  More Features

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
Related products: Peter's Data Entry Suite  | Peter's Business Logic Driven UI ("BLD")  | Peter's Professional Validation  | Peter's More Validators
Peter's Date and Time  | Peter's TextBoxes  | Peter's Interactive Pages  | Peter's Input Security
Back