Return to the menu Select another DES Module

Demonstrates changing the style of the field label and other elements nearby the data entry field

When a Validator detects an error, it can change the style of the label and other controls around the field with the error.

With DES, you can use the HiliteFields feature to do the following:

Assign a style, such as a font color, to the label.
Assign a style, such as a background color, to the enclosing control like a Panel or <div runat="server"> tag.
Assign a style to any other control

DES will switch to your style when the error is shown and switch back when the error is corrected.

Add a PageManager control to the page. Then use these properties to establish field highlighting:

HiliteFieldsNearbyError – Determines if fields identified by the validator's Label and HiliteFields properties will change their appearance when the Validator detects an error.
TextHiliteFieldsCssClass – The style sheet class name assigned to textual controls that appear in the HiliteFields and Label properties on Validator controls when there is a validation error.
NonTextHiliteFieldsCssClass – The style sheet class name assigned to non-textual controls that appear in the HiliteFields property on Validator controls when there is a validation error.

Each of the CssClass properties above is applied when there is an error. The original class is restored when the error is fixed. To merge your style sheet with the current style sheet class, put a plus (“+”) character first. For example, “+MyClassName”.

Default styles are defined in the [web app]\Appearance\Validation\Validators.css file.

The Validator also must be setup to specify the fields that are highlighted. It uses these properties:

Label, SecondLabel, Label2, Label3, and Label4 - Specifies the Label to highlight. You must supply either the ID of the control in the Label.LabelControlID property or a reference to the Label's object in the Label.LabelControl property.
HiliteFields - This is a collection of PeterBlum.DES.Web.WebControls.ControlConnection objects. Each specifies on control to highlight in its ControlID or ControlInstance properties. Review the source code below to see syntax examples.

Controls

Use the buttons to invoke validation which changes the styles.
The Text To Find field only changes the label, making it bold. The other fields change their label to bold and the background color of enclosing panels.
Fields marked

require an entry.

Text to find:

Your Name:

Your Age:

Source Code (C#)

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

Use the buttons to invoke validation which changes the styles.<br/>
The <b>Text To Find</b> field only changes the label, making it bold. The other fields
change their label to bold and the background color of enclosing panels.<br/>
<des:PageManager ID="PageManager1" runat="server" HiliteFieldsNearbyError="True" />
<des:RequiredFieldsDescription ID="RequiredFieldsDescription1" runat="server" /><br/><br/>
<asp:Label ID="SearchTextLabel" runat="server">Text to find: </asp:Label> 
<asp:TextBox ID="SearchText" runat="server" Width="200px" />
<des:RequiredTextValidator ID="rtvSearchText" runat="server" ControlIDToEvaluate="SearchText"
   ErrorMessage="Required" ShowRequiredFieldMarker="true"
   Group="Search"
   Label-LabelControlID="SearchTextLabel" Label-TrimTrailingSymbol="true" >
   <ErrorFormatterContainer>
      <des:AlertImageErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<des:Button ID="SearchButton" runat="server" Text="Search now" OnClick="SearchButton_Click"
   Group="Search" /><br/>
<hr/>
<asp:Panel ID="YourNamePanel" runat="server">
<asp:Label ID="YourNameLabel" runat="server">Your Name:</asp:Label> 
<des:FilteredTextBox ID="YourName" runat="server" Width="200px" 
   LettersLowercase="true" LettersUppercase="true" Space="true" DiacriticLetters="true" OtherCharacters=",."  />
<des:RequiredTextValidator ID="rtvYourName" runat="server" ControlIDToEvaluate="YourName"
   ErrorMessage="Required" SummaryErrorMessage="Your Name is required" ShowRequiredFieldMarker="true"
   Group="Data"
   Label-LabelControlID="YourNameLabel" Label-TrimTrailingSymbol="true" >
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
   <HiliteFields>
      <des:ControlConnection ControlID="YourNamePanel" />
   </HiliteFields>
</des:RequiredTextValidator>
<des:CharacterValidator ID="CharacterValidator1" runat="server" ControlIDToEvaluate="YourName"
   ErrorMessage="Illegal character entered." SummaryErrorMessage="Illegal character entered in Your Name."
   Group="Data"
   Label-LabelControlID="YourNameLabel" Label-TrimTrailingSymbol="true" >
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
   <HiliteFields>
      <des:ControlConnection ControlID="YourNamePanel" />
   </HiliteFields>
</des:CharacterValidator>
</asp:Panel>
<br/>
<asp:Panel ID="YourAgePanel" runat="server">
<asp:Label ID="YourAgeLabel" runat="server">Your Age:</asp:Label> 
<des:IntegerTextBox ID="Age" runat="server" Width="40px"
   ShowSpinner="true" MinValue="1" MaxValue="120" />
<des:RequiredTextValidator ID="rtvAge" runat="server" ControlIDToEvaluate="Age"
   ErrorMessage="Required" SummaryErrorMessage="Your age is required" ShowRequiredFieldMarker="true"
   Group="Data"
   Label-LabelControlID="YourAgeLabel" Label-TrimTrailingSymbol="true" >
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
   <HiliteFields>
      <des:ControlConnection ControlID="YourAgePanel" />
   </HiliteFields>
</des:RequiredTextValidator>
<%-- NOTE: You can omit the DataType property for any of DES's data type oriented textboxes.--%>
<des:DataTypeCheckValidator ID="DataTypeCheckValidator1" runat="server" ControlIDToEvaluate="Age"
   ErrorMessage="Enter a number" SummaryErrorMessage="Enter a number in Your Age" DataType="Integer" 
   Group="Data"
   Label-LabelControlID="YourAgeLabel" Label-TrimTrailingSymbol="true" >
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
   <HiliteFields>
      <des:ControlConnection ControlID="YourAgePanel" />
   </HiliteFields>
</des:DataTypeCheckValidator>
<%-- NOTE: When using DES numeric textbox, you can omit the Minimum and Maximum
properties if you already set the range on the textbox's MinValue and MaxValue properties.
You also can omit the DataType property for any of DES's data type oriented textboxes.--%>
<des:RangeValidator ID="RangeValidator1" runat="server" ControlIDToEvaluate="Age"
   ErrorMessage="Between {MINIMUM} and {MAXIMUM}" SummaryErrorMessage="Your Age must be between {MINIMUM} and {MAXIMUM}" 
   DataType="Integer" 
   Minimum="1" Maximum="120"
   Group="Data"
   Label-LabelControlID="YourAgeLabel" Label-TrimTrailingSymbol="true" >
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
   <HiliteFields>
      <des:ControlConnection ControlID="YourAgePanel" />
   </HiliteFields>
</des:RangeValidator>
</asp:Panel>
<br/>
<hr/>
<des:Button ID="Submit" runat="server" Text="Submit" OnClick="Button1_Click" 
   Group="Data"/> 
<des:Button ID="Cancel" runat="server" Text="Cancel" CausesValidation="false" /> 
<input type="reset" id="Reset" runat="server" value="Reset" />
<br/><br/>
<des:ValidationSummary ID="ValidationSummary1" runat="server" 
   HeaderText="Fix these errors"
   Group="Data" />

Return to the menu Select another DES Module