Return to the menu Select another DES Module

Demonstrates different ErrorFormatters on validator and CombinedErrorMessages controls

Validator controls use ErrorFormatters to display the error message. An ErrorFormatter installs the HTML that formats the error message in the same location as the Validator control is placed into your ASP.NET web form. That HTML can do anything you want, including using JavaScript to make the message more interactive.

The ErrorFormatter class is assigned to the ErrorFormatter property of the Validator. It also exists on the CombinedErrorMessages control. Review the ASP.NET Markup below the examples for syntax assistance with the ErrorFormatters.

DES includes these ErrorFormatter classes:

Text (PeterBlum.DES.Web.WebControls.TextErrorFormatter) – Displays the error message on the page, much like a Label control. It has numerous style properties although using a style sheet class with its CssClass property is preferred. It supports optional HTML text that encloses the error message, to customize its appearance. It can display an image to the left of the error message.
Hyperlink with Alert (PeterBlum.DES.Web.WebControls.HyperLinkErrorFormatter) – Displays a hyperlink with a short label that you supply. When clicked, an alert appears with the error message.
Image with Tooltip (PeterBlum.DES.Web.WebControls.TooltipImageErrorFormatter) – Displays an image. When the user points to it, a tooltip shows the error message. Change the default image with the ImageUrl property.
Image with Alert (PeterBlum.DES.Web.WebControls.AlertImageErrorFormatter) – Displays an image. When the user clicks on it, an alert appears with the error message. Change the default image with the ImageUrl property.
PopupView (PeterBlum.DES.Web.WebControls.PopupErrorFormatter) – Only show an image. When the user clicks on the image, show a PopupView, which is a floating message. In addition, when focus moves into a control being evaluated, it automatically pops up. Change the default PopupView definition with the PopupViewName property.

The most used property on an ErrorFormatter is Display. It has three values:

Static - When not shown, it still takes up the space associated with the error message. This is the default.
Dynamic - When not shown, no space is used. Always consider this when you have two or more validators side-by-side. Alternatively, consider the CombinedErrorMessages control.
None - Never show the validator's error message at the location of the Validator control. This is used when you only want the message to appear in the ValidationSummary control.

Controls

Click the Submit button to see the RequiredTextValidators with various errorformatters.

Text - TextErrorFormatter

Since this is default, you can omit defining it unless you actually need to change one of its properties.
Required

Text - TextErrorFormatter, Example 2

This time many properties on the TextErrorFormatter are assigned.

Image with Alert - AlertImageErrorFormatter

Click on the image to see the alert showing the error message.

Image with Alert - AlertImageErrorFormatter, Example 2

Image with Tooltip - TooltipImageErrorFormatter

Point to the image to view the tooltip.

Image with Tooltip - TooltipImageErrorFormatter, Example 2

Hyperlink with Alert - HyperlinkErrorFormatter

Click the hyperlink to view the alert with error message.
Explain

PopupView - PopupErrorFormatter

PopupView - PopupErrorFormatter, Example 2

PopupViews are defined in your custom.des.config file. Use the Global Settings Editor to customize its contents. In this case, we've switched from the default appearance to the one named "LtRed-Medium".

Source Code (C#)

<script runat="server">
   protected void Button1_Click(object sender, EventArgs e)
   {
      if (PeterBlum.DES.Globals.WebFormDirector.IsValid)
      {
         // save your data here
      }
   }
   
</script>

Click the Submit button to see the <a href="../Controls/ABARoutingNumberValidator.aspx" class="ControlClass">RequiredTextValidators</a> with various errorformatters.<br/>
<des:Button ID="Button3" runat="server" Text="Click here to get started"></des:Button> 
<h3>Text - TextErrorFormatter</h3>
Since this is default, you can omit defining it unless you actually need to change one of its properties.<br/>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<des:RequiredTextValidator ID="RequiredTextValidator1" runat="server" ControlIDToEvaluate="TextBox1"
   ErrorMessage="Required" >
</des:RequiredTextValidator>
<br/>
<h3>Text - TextErrorFormatter, Example 2</h3>
This time many properties on the TextErrorFormatter are assigned.<br/>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<des:RequiredTextValidator ID="RequiredTextValidator2" runat="server" ControlIDToEvaluate="TextBox2"
   ErrorMessage="Required" >
   <ErrorFormatterContainer>
      <des:TextErrorFormatter ImageURL="{APPEARANCE}/Validation/valerroricon_animated.GIF"
         Display="Dynamic" GapAfterImageType="Pixel" GapAfterImage="20" HTMLAfter="<br />"
         ToolTip="Fix this error"></des:TextErrorFormatter>
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<br/>
<h3>Image with Alert - AlertImageErrorFormatter</h3>
Click on the image to see the alert showing the error message.<br/>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<des:RequiredTextValidator ID="RequiredTextValidator3" runat="server" ControlIDToEvaluate="TextBox3"
   ErrorMessage="Required" >
   <ErrorFormatterContainer>
      <des:AlertImageErrorFormatter/>
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<br/>
<h3>Image with Alert - AlertImageErrorFormatter, Example 2</h3>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<des:RequiredTextValidator ID="RequiredTextValidator4" runat="server" ControlIDToEvaluate="TextBox4"
   ErrorMessage="Required" >
   <ErrorFormatterContainer>
      <des:AlertImageErrorFormatter Display="Dynamic"
          ImageURL="{APPEARANCE}/Validation/ValErrorIcon_animated.GIF" 
          ToolTip="Click to view the error"/>
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<br/>

<h3>Image with Tooltip - TooltipImageErrorFormatter</h3>
Point to the image to view the tooltip.<br/>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<des:RequiredTextValidator ID="RequiredTextValidator5" runat="server" ControlIDToEvaluate="TextBox5"
   ErrorMessage="Required">
   <ErrorFormatterContainer>
      <des:TooltipImageErrorFormatter/>
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<h3>Image with Tooltip - TooltipImageErrorFormatter, Example 2</h3>
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
<des:RequiredTextValidator ID="RequiredTextValidator6" runat="server" ControlIDToEvaluate="TextBox6"
   ErrorMessage="Required">
   <ErrorFormatterContainer>
      <des:TooltipImageErrorFormatter Display="Dynamic"
          ImageURL="{APPEARANCE}/Validation/ValErrorIcon_animated.GIF" />
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<br/>
<h3>Hyperlink with Alert - HyperlinkErrorFormatter</h3>
Click the hyperlink to view the alert with error message.<br/>
<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
<des:RequiredTextValidator ID="RequiredTextValidator7" runat="server" ControlIDToEvaluate="TextBox7"
   ErrorMessage="Required">
   <ErrorFormatterContainer>
      <des:HyperLinkErrorFormatter/>
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<br/>
<h3>PopupView - PopupErrorFormatter</h3>
<asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
<des:RequiredTextValidator ID="RequiredTextValidator8" runat="server" ControlIDToEvaluate="TextBox8"
   ErrorMessage="Required">
   <ErrorFormatterContainer>
      <des:PopupErrorFormatter/>
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<br/>
<h3>PopupView - PopupErrorFormatter, Example 2</h3>
PopupViews are defined in your custom.des.config file. Use the Global Settings Editor to customize
its contents. In this case, we've switched from the default appearance to the one named "LtRed-Medium".<br/>
<asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
<des:RequiredTextValidator ID="RequiredTextValidator9" runat="server" ControlIDToEvaluate="TextBox9"
   ErrorMessage="Required">
   <ErrorFormatterContainer>
      <des:PopupErrorFormatter PopupViewName="LtRed-Medium" Display="Dynamic" />
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<br/>

Return to the menu Select another DES Module