You can establish five ways to attract the user to the error as they tab off of a changed field. They are:

• 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.
• 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.
• Change the style of labels or enclosing elements near the field with the error.

All of these settings are established on the page-level or globally for consistency on your site.

Demo 1

The two textboxes below each have the first four attributes set. The difference is simply a textual and graphical error formatter to show how blinking looks with each. This demo establishes the number of blinks at 3 before it stops. You can establish blinking to stay on or blink 1, 2, 3, 5, or 10 times. You can even set the number of blinks differently from when the user clicks Submit.

Type in "abc" and tab off each textbox to see how all of these features work.

ASP.NET Syntax for this demo

In addition to the textboxes, validators and buttons, add a PageManager object with these settings:

<des:PageManager id="PageManager1" runat="server" 
   BlinkOnChange="Three" BlinkOnSubmit="Three" 
   FocusOnChange="True" ShowAlertOnChange="True" 
   ChangeStyleOnControlsWithError="True" >
</des:PageManager>

Demo 2

This demo is very similar to Demo 1. In addition to all of the settings in Demo 1, it changes the font style of the labels and the background color and border of an enclosing Panel. The style changes are determined by style sheet class names.

Type in "abc" and tab off each textbox to see how all of these features work.

ASP.NET Syntax for this demo

<des:PageManager id="PageManager1" runat="server" 
  BlinkOnChange="Three" BlinkOnSubmit="Three" 
  FocusOnChange="True" ShowAlertOnChange="True" 
  ChangeStyleOnControlsWithError="True" HiliteFieldsNearbyError="True">
</des:PageManager>
<asp:Panel ID=Panel1 Runat=server>
<asp:Label id=Label1 Runat="server">Label1:</asp:Label>
<asp:TextBox id=TextBox3 runat="server" />
<DES:RequiredTextValidator id=Requiredtextvalidator3 runat="server"
    ErrorMessage="This field is required" ControlIDToEvaluate="TextBox3">
  <ErrorFormatterContainer>
    <des:TextErrorFormatter Display="Dynamic" />
  </ErrorFormatterContainer>
  <HiliteFields>
    <des:ControlConnection ControlID="Label1" />
    <des:ControlConnection ControlID="Panel1" />
  </HiliteFields>
</DES:RequiredTextValidator>
<des:DataTypeCheckValidator id=Datatypecheckvalidator3 runat="server"
    ErrorMessage="Enter an integer" ControlIDToEvaluate="TextBox3" DataType="Integer">
  <ErrorFormatterContainer>
    <des:TextErrorFormatter Display="Dynamic" />
  </ErrorFormatterContainer>
  <HiliteFields>
    <des:ControlConnection ControlID="Panel1" />
    <des:ControlConnection ControlID="Label1" />
  </HiliteFields>
</des:DataTypeCheckValidator>
</asp:Panel>
<br>
<asp:Panel ID="Panel2" Runat=server>
<asp:Label id=Label2 Runat="server">Label2:</asp:Label>
<asp:TextBox id=TextBox4 runat="server" />
<DES:RequiredTextValidator id=Requiredtextvalidator4 runat="server"
    ErrorMessage="This field is required" ControlIDToEvaluate="TextBox4">
  <ErrorFormatterContainer>
    <des:PopupErrorFormatter Display="Dynamic"></des:PopupErrorFormatter>
  </ErrorFormatterContainer>
  <HiliteFields>
    <des:ControlConnection ControlID="Panel2" />
    <des:ControlConnection ControlID="Label2" />
  </HiliteFields>
</DES:RequiredTextValidator>
<des:DataTypeCheckValidator id=Datatypecheckvalidator4 runat="server" 
   ErrorMessage="Enter an integer" ControlIDToEvaluate="TextBox4" DataType="Integer">
  <ErrorFormatterContainer>
    <des:PopupErrorFormatter Display="Dynamic"></des:PopupErrorFormatter>
  </ErrorFormatterContainer>
  <HiliteFields>
    <des:ControlConnection ControlID="Panel2" />
    <des:ControlConnection ControlID="Label2" />
  </HiliteFields>
</des:DataTypeCheckValidator>
</asp:Panel>