Return to the menu   Select another DES Module

Demonstrates using a changed style sheet on the data entry field to call attention to errors

Add a PageManager control to the page. Then use these properties to establish this feature:

  • ChangeStyleOnControlsWithError – Determines if controls change their appearance to show an error. Set it to true to enable the feature. By default, the style sheet classes “DESVALFieldWithError”, “DESVALListWithError”, and “DESVALCheckBoxWithError” determine their appearance.
    When the validator’s OtherStyles property is set to Alternative, it uses these style sheet classes by default: “DESVALFieldWithErrorAlt”, “DESVALListWithErrorAlt”, and “DESVALCheckBoxWithErrorAlt”.
    These styles are defined in the [web app]\Appearance\Validation\Validators.css file.
  • ControlErrorCssClass and ControlErrorCssClass_Alt – The style sheet class name assigned to all of the controls that generate a validation error (unless overridden by ListErrorCssClass and CheckBoxCssClass). The Validator's OtherStyles property selects which to use.
  • ListErrorCssClass and ListErrorCssClass_Alt – The style sheet class name assigned to ListBox and DropDownList controls that generate a validation error. The Validator's OtherStyles property selects which to use.
  • CheckBoxErrorCssClass and CheckBoxErrorCssClass_Alt – The style sheet class name assigned to CheckBox and RadioButton controls that generate a validation error. The Validator's OtherStyles property selects which to use.

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”.


Controls

To show an error, click the button or type 'abc' into the textbox and tab off. In this example, the RequiredTextValidator has OtherStyles="Alternative", giving the textbox a different appearance. To see it, clear the textbox and tab off.


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> To show an error, click the button or type 'abc' into the textbox and tab off. In this example, the RequiredTextValidator has <span class="PropertyName">OtherStyles</span>="Alternative", giving the textbox a different appearance. To see it, clear the textbox and tab off.<br/> <des:PageManager ID="PageManager1" runat="server" ChangeStyleOnControlsWithError="True" /> <asp:TextBox ID="TextBox1" runat="server" /> <des:RequiredTextValidator ID="RequiredTextValidator1" runat="server" ControlIDToEvaluate="TextBox1" ErrorMessage="Required" OtherStyles="Alternative" > <ErrorFormatterContainer> <des:TextErrorFormatter Display="Dynamic" /> </ErrorFormatterContainer> </des:RequiredTextValidator> <des:DataTypeCheckValidator ID="DTC1" runat="server" ControlIDToEvaluate="TextBox1" DataType="Integer" ErrorMessage="Illegal format. Only digits are allowed." /> <br/> <des:Button ID="Button1" runat="server" Text="Submit" />

Return to the menu   Select another DES Module