Peter's Professional Validation

Error Formatters

Suppose you want to customize the appearance of an error message. Microsoft's Validators require you to embed the formatting HTML into the actual error message.

Each Peter's Data Entry Suite ("DES") Validator separates the ErrorMessage from its formatting by using an "ErrorFormatter". By keeping things separate, you can adjust the formatting and the error message easily without affecting the other. Additionally, the powerful ErrorFormatters supplied by DES provide useful new formatting choices that are difficult to accomplish with Microsoft's Validators.

DES comes with five ErrorFormatter classes: Text, Popup (requires a license covering the Peter's More Validators module), Hyperlink with Alert, Image with ToolTip, and Image with Alert. This demo shows all five, with several examples for using the many properties of the Text ErrorFormatter.

Click Submit to show all of the validators on this page. Click Reset to remove them.

Demo 1 - Text ErrorFormatter

Here is the Text ErrorFormatter with just the default settings. It looks like Microsoft's Validator formats.

ASP.NET Syntax for this demo

<asp:TextBox id="TextBoxDemo1" runat="server" />
<des:RequiredTextValidator id="RTVDemo1" runat="server" 
  ControlIDToEvaluate="TextBoxDemo1" ErrorMessage="This field is required">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<des:DataTypeCheckValidator id="DTCDemo1" runat="server" 
  ControlIDToEvaluate="TextBoxDemo1" ErrorMessage="Enter an integer" DataType="Integer">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>

Demo 2 - Text ErrorFormatter

The Text ErrorFormatter has some useful properties to add formatting.

HTMLBefore allows you to insert any HTML that you want before the error message.
HTMLAfter allows you to add HTML after the error message.
ImageURL allows you to show an image before the error message.

Styles such as style sheet class names are also properties of every ErrorFormatter.

This Text ErrorFormatter has set HTMLBefore to "<i>Error:</i>" and ImageURL is set to an image supplied with this product.

ASP.NET Syntax for this demo

<asp:TextBox id="TextBox1" runat="server" />
<des:RequiredTextValidator id="RequiredTextValidator1" runat="server" 
  ControlIDToEvaluate="TextBoxDemo2" ErrorMessage="This field is required">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" HTMLBefore="&lt;i&gt;Error:&lt;/i&gt;" 
           ImageURL="~/DES/Appearance/Validation/valerroricon.GIF" />
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<des:DataTypeCheckValidator id="DataTypeCheckValidator1" runat="server" 
  ControlIDToEvaluate="TextBoxDemo2" ErrorMessage="Enter an integer" DataType="Integer">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" HTMLBefore="&lt;i&gt;Error:&lt;/i&gt;" 
           ImageURL="~/DES/Appearance/Validation/valerroricon.GIF" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>

Demo 3 - Popup ErrorFormatter

This ErrorFormatter requires a license covering the Peter's More Validators module.
The Popup ErrorFormatter initially displays an image to signal an error. When the user points to the image or the data entry control, the error message pops up using a "PopupView".
You have extensive control over the look of PopupViews: its style sheets, images, size popup position. DES is smart enough to relocate the popup when its initial position will not fit into the window. The same PopupView element is also available with the Interactive Hints feature found in the Interactive Pages module.

ASP.NET Syntax for this demo

<asp:TextBox id="TextBoxDemo3" runat="server" />
<des:RequiredTextValidator id="RTVDemo3" runat="server" 
  ControlIDToEvaluate="TextBoxDemo3" ErrorMessage="This field is required">
   <ErrorFormatterContainer>
      <des:PopupErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<des:DataTypeCheckValidator id="DTCDemo3" runat="server" 
  ControlIDToEvaluate="TextBoxDemo3" ErrorMessage="Enter an integer" DataType="Integer">
   <ErrorFormatterContainer>
      <des:PopupErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>

Demo 4 - Image with ToolTip ErrorFormatter

The Image with ToolTip ErrorFormatter shows an image without the error message appearing on the page. When the user points to it, a tooltip appears with the error message. This is often used to save space on the page. In this example, the image is one that is supplied with DES.

ASP.NET Syntax for this demo

<asp:TextBox id="TextBoxDemo4" runat="server" />
<des:RequiredTextValidator id="RTVDemo4" runat="server" 
  ControlIDToEvaluate="TextBoxDemo4" ErrorMessage="This field is required">
   <ErrorFormatterContainer>
      <des:TooltipImageErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<des:DataTypeCheckValidator id="DTCDemo4" runat="server" 
  ControlIDToEvaluate="TextBoxDemo4" ErrorMessage="Enter an integer" DataType="Integer">
   <ErrorFormatterContainer>
      <des:TooltipImageErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>

Demo 5 - Image with Alert ErrorFormatter

The Image with Alert ErrorFormatter shows an image without the error message appearing on the page. When the user clicks on it, an alert box appears with the error message. This is often used to save space on the page. In this example, the animated GIF is one that is supplied with DES.

ASP.NET Syntax for this demo

<asp:TextBox id="TextBoxDemo5" runat="server" />
<des:RequiredTextValidator id="RTVDemo5" runat="server" 
  ControlIDToEvaluate="TextBoxDemo5" ErrorMessage="This field is required">
   <ErrorFormatterContainer>
      <des:AlertImageErrorFormatter Display="Dynamic"
         ImageURL="~/DES/Appearance/Validation/ValErrorIcon_animated.gif" />
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<des:DataTypeCheckValidator id="DTCDemo5" runat="server" 
  ControlIDToEvaluate="TextBoxDemo5" ErrorMessage="Enter an integer" DataType="Integer">
   <ErrorFormatterContainer>
      <des:AlertImageErrorFormatter Display="Dynamic"
         ImageURL="~/DES/Appearance/Validation/ValErrorIcon_animated.gif" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>

Demo 6 - Hyperlink with Alert ErrorFormatter

The Hyperlink with Alert ErrorFormatter shows hyperlink without the error message appearing on the page. When the user clicks on it, an alert box appears with the error message. This is often used to save space on the page. In this example, hyperlink uses the text "Explain".

ASP.NET Syntax for this demo

<asp:TextBox id="TextBoxDemo6" runat="server" />
 <des:RequiredTextValidator id="RTVDemo6" runat="server" 
   ControlIDToEvaluate="TextBoxDemo6" ErrorMessage="This field is required">
    <ErrorFormatterContainer>
       <des:HyperLinkErrorFormatter Display="Dynamic" />
    </ErrorFormatterContainer>
 </des:RequiredTextValidator>
 <des:DataTypeCheckValidator id="DTCDemo6" runat="server" 
   ControlIDToEvaluate="TextBoxDemo6" ErrorMessage="Enter an integer" DataType="Integer">
    <ErrorFormatterContainer>
       <des:HyperLinkErrorFormatter Display="Dynamic" />
    </ErrorFormatterContainer>
 </des:DataTypeCheckValidator>