tutorials - validation users guide

Professional Validation And More Version 3.0

Tutorials

Copyright © 2004-2006, Peter L. Blum. All Rights Reserved

USE OF THIS SOFTWARE INDICATES ACCEPTANCE OF THE LICENSE AGREEMENT.

PLEASE READ THE LICENSE AGREEMENT IN THE FILE "LICENSE AGREEMENT.HTM".

For technical support, please email [email protected].

Peter loves feedback. It’s the only way to improve the software and its documentation. If you have questions, ideas, enhancements or bugs, please email [email protected].

Please visit http://www.PeterBlum.com for information on updates and other products. Each product’s main page identifies its update history and provides access to updates at the top of the page.

.

mailto:[email protected]

mailto:[email protected]

http://www.peterblum.com/

Professional Validation And More v3.0 Last Updated: 10/17/2006 Tutorials Peter Blum

Copyright © 2004-2006 Peter L. Blum. All Rights Reserved of 49

Overview Welcome to the Tutorials for Professional Validation And More (“VAM”). If you have not looked at the User’s Guides, they should be your primary tool for understanding the parts of VAM. These tutorials will show you how to use the controls and classes of VAM without the same level of detail that the User’s Guide provides on the properties.

Before you begin any tutorials, please fully install Professional Validation And More into your web application. Directions are in the Installation Guide.

These tutorials all use “design mode” found in Visual Studio.net and WebMatrix. They show the resulting ASP.NET text in case you script them in another way.

Tutorials Table Of Contents Click on any of these topics to jump to the text.

Validation Adding any Validator to your Web Form

Making a Validator that combines the rules of several Conditions

Using the MultiConditionValidator with complex logic

Enabling a Validator only when the conditions are right

Requiring one mark amongst Checkboxes on DataGrid Rows

Setting up separate groups on a Web Form

Enhancing the ValidationSummary

Getting the user’s attention to the error in other ways

Localizing the formatting rules of dates and currencies in the DataType property

Adding Required Field Markers

FieldStateControllers Adding a FieldStateController to your Web Form

Changing the state of several fields

Changing the URL of a hyperlink

Changing the font of a Label

Using the FieldStateController to monitor RadioButtons



Adding any Validator to your Web Form Goal: Setting up a Web Form with one Validator.

What you will learn: A Web Form with Validators requires at least one Validator, a VAM Button to submit the page, and the <link> tag to the style sheet file. While a RequiredTextValidator is used here, these steps apply to every Validator. However, step 5 will vary depending on the properties that set the condition for the Validator.

Scenario: Your Web Form contains a TextBox that you want to report an error if its left blank. It will include a Button to submit the page. The Validator will appear to the right of the TextBox. The Button will appear below it.

Note: This is a variation of the topic “Adding Validator Controls” from the User’s Guide.

1. Add a Web Form to your web application.

2. Add a <link> tag to the <head> section of the Web Form. It should have this content:

<link href="/VAM/Appearance/VAMStyleSheet.css" type="text/css" rel="stylesheet">

Note: VAM provides a default style sheet file in the web application under the URL shown above. You can use a different style sheet file if you prefer. Please pay careful attention to the URL above. Since it starts with a lead slash, the browser will look for the /VAM folder in the domain root, not the web application root. You may prefer to use a relative URL to the /VAM folder. For example, if this Web Form is in the same folder as /VAM, omit the leading slash.

3. Add a TextBox to your Web Form:

• Open the ToolBox and locate the TextBox control. If you have a license for VAM’s TextBox control, use it. Otherwise, use the one supplied with ASP.NET.

• Drag it onto your Web Form.

• Set the ID property to TextBox1.

4. Add the RequiredTextValidator to your Web Form:

• Open the ToolBox and locate the RequiredTextValidator control. In VS.NET, it may be in a tab named “Professional Validation And More”.


• Place it to the right of the TextBox.

Note: The Validator should have a red font color. If not, the style sheet URL is incorrect.

5. Set the ControlIDToEvaluate property to TextBox1:

• Click on the RequiredTextValidator.

• Open the Properties Editor.

• Drop down the list on the ControlIDToEvaluate property.

• Select TextBox1.

6. Set the ErrorMessage property to “This field is required.”

The RequiredTextValidator is complete.

7. Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Validator.

8. Add a VAM Button control to the new line:

• Open the ToolBox and locate VAM’s Button control. In VS.NET, it may be in a tab named “Professional Validation And More”.


• Place it below the TextBox.



9. The form is complete. You can test it.

ASP.NET Text For This Tutorial <%@ Page [properties depend on your language and development tool] %> <%@ Register TagPrefix="vam" Namespace="PeterBlum.VAM" Assembly="PeterBlum.VAM" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>Web Form1</title> there may be some <meta> tags here


</head> <body> <form id="Form1" method="post" runat="server"> <p> <vam:TextBox id=TextBox1 runat="server"></vam:TextBox> <vam:RequiredTextValidator id=RequiredTextValidator1 runat="server" ControlIDToEvaluate="TextBox1" ErrorMessage="This field is required" > <ErrorFormatterContainer> <vam:TextErrorFormatter></vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:RequiredTextValidator> </p> <p> <vam:Button id=Button1 runat="server"></vam:Button> </p> </form> </body> </html>



Making a Validator that combines the rules of several Conditions Goal: Show one error message based on the Conditions of several Validators.

What you will learn: The MultiConditionValidator shows one error message. It allows you to assign any number of Conditions based on Validators to show the error.

Scenario: Show the error message “Enter a decimal value” on a TextBox whose data is supposed to be a Decimal number and it cannot be blank.

Normally you would add two separate Validators: RequiredTextValidator and DataTypeCheckValidator. With VAM, you can use the MultiConditionValidator to adapt the conditions of other Validators using Boolean logic of AND, OR, and NOT. In this case, the error will show unless the textbox is not blank AND it contains a decimal value.








• Set the ID to TextBox1.

4. Add the MultiConditionValidator to your Web Form:

• Open the ToolBox and locate the MultiConditionValidator control. In VS.NET, it may be in a tab named “Professional Validation And More”.




5. Set the following properties on the MultiConditionValidator in the Properties Editor:

• ErrorMessage to “Enter a decimal value”.

• Operator to AND.

6. Click on the button to the right of the Conditions property.

7. Click the Add Button.



8. Select RequiredTextCondition and click OK. The Add Condition form appears.

Note: The RequiredTextCondition is the condition used within the RequiredTextValidator. It has the same properties for evaluating the condition.

9. Set the ControlIDToEvaluate property to TextBox1 and click OK.

You are back on the MultiCondition Editor form.

10. Click the Add Button.

11. Select DataTypeCheckCondition and click OK. The Add Condition form appears.

Note: The DataTypeCheckCondition is the condition used within the DataTypeCheckValidator. It has the same properties for evaluating the condition.

12. Set the following properties on the DataTypeCheckCondition and click OK.

• ControlIDToEvaluate to TextBox1.

• DataType to Double.

You are back on the MultiCondition Editor form. The MultiCondition Editor form now looks like this:



13. Click OK.

The MultiConditionValidator is complete.

14. Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<BR>’ after the Validator.

15. Add a VAM Button control to the new line.







</head> <body> <form id="Form1" method="post" runat="server"> <vam:TextBox id=TextBox1 runat="server"></vam:TextBox>

<vam:MultiConditionValidator id=MultiConditionValidator1 runat="server" Operator="AND" ErrorMessage="Enter a decimal value"> <ErrorFormatterContainer> <vam:TextErrorFormatter></vam:TextErrorFormatter> </ErrorFormatterContainer> <Conditions> <vam:RequiredTextCondition ControlIDToEvaluate="TextBox1" Name="RequiredTextCondition"> </vam:RequiredTextCondition> <vam:DataTypeCheckCondition DataType="Double" ControlIDToEvaluate="TextBox1" Name="DataTypeCheckCondition"> </vam:DataTypeCheckCondition>

</Conditions> </vam:MultiConditionValidator> </form> </body> </html>



Using the MultiConditionValidator with complex logic Goal: Show the MultiConditionValidator to handle some complex logic.

What you will learn: The MultiConditionValidator lets you adapt the Conditions of all of VAM’s Validators into the logic of AND and OR logic. By reusing existing conditions, you often can avoid writing code within a CustomValidator.

There are several challenges involved with MultiConditionValidator:

• Determining the rules that evaluate each field. The MultiConditionValidator uses the Condition objects associated with each Validator. The Validation User's Guide identifies the Condition class name with each Validator. So you say "hey, that sounds like such-and-such Validator", use its Condition class.

• Determining the logic. Put the Condition objects inside a boolean expression that uses AND, OR and NOT operators. The MultiConditionValidator has an Operator property to determine AND/OR and a NotCondition property to switch to "NOT" logic. As you need to build nested logic, you will use MultiCondition objects (the condition of MultiConditionValidators), with their own Operator and NotCondition properties.

Scenario: The form has a TextBox and DropDownList. Only one is allowed to have a value assigned.

1. Determine the Conditions. If we wanted to detect a blank textbox, we’d use the RequiredTextValidator. If we wanted to detect an unselected DropDownList, we’d use a RequiredListValidator. With the Validators identified, locate their Condition class names in the Validation User's Guide. They are:

• RequiredTextCondition

• RequiredListCondition

2. Determine the logic. In this case, to develop “only one of two”, you need this kind of logic: (A AND NOT B) OR (NOT A AND B). This could read:

(TextBox has text AND DropDownList has no selection) OR

(TextBox has no text AND DropDownList has a selection)

3. Here’s how each of these parts is developed:

• “TextBox has text” – Use the RequiredTextCondition on the TextBox

• “DropDownList has no selection” – Use RequiredListCondition on the DropDownList. Set the NotCondition property to true because we want the RequiredListCondition to consider having a selection to be an error.

• “TextBox has no text” – Use the RequiredTextCondition on the TextBox. Set the NotCondition property to true because we want the RequiredTextCondition to consider having a selection to be an error.

• “DropDownList has a selection” – Use RequiredListCondition on the DropDownList.

• The MultiConditionValidator itself will have it Operator property set to OR.

• You need two MultiCondition classes to contain the AND operators. These classes will hold the four conditions listed above.





</head> <body> <form id="Form1" method="post" runat="server">

<p> <vam:TextBox id=TextBox1 runat="server"></vam:TextBox> <asp:DropDownList id=DropDownList1 runat="server"> <asp:ListItem Value="None" >--- NO SELECTION ---</asp:ListItem> <asp:ListItem Value="One" >One</asp:ListItem> <asp:ListItem Value="Two" >Two</asp:ListItem> </asp:DropDownList> </p> <p> <vam:MultiConditionValidator id=MCV1 runat="server" ErrorMessage="Error" Operator="OR"> <Conditions> <vam:MultiCondition Operator="AND" > <Conditions> <vam:RequiredTextCondition ControlIDToEvaluate="TextBox1" > </vam:RequiredTextCondition> <vam:RequiredListCondition ControlIDToEvaluate="DropDownList1" NotCondition="True" UnassignedIndex="0"> </vam:RequiredListCondition> </Conditions> </vam:MultiCondition> <vam:MultiCondition Operator="AND"> <Conditions> <vam:RequiredTextCondition ControlIDToEvaluate="TextBox1" NotCondition="True" > </vam:RequiredTextCondition> <vam:RequiredListCondition ControlIDToEvaluate="DropDownList1" UnassignedIndex="0" > </vam:RequiredListCondition> </Conditions> </vam:MultiCondition> </Conditions> </vam:MultiConditionValidator> </p>

</form> </body> </html>



Enabling a Validator only when the conditions are right Goal: Keep a Validator disabled until the conditions are right.

What you will learn: Use the Enabler property on any Validator to automatically enable and disable it. You can use any Condition objects found on Validators. For example, if you want to enable based on a checkbox, use a CheckStateCondition (which is from the CheckStateValidator). There are several “Non-Data Entry Conditions” which look at non-data attributes of fields like visibility, enabled, readonly, and more.

Scenario: A TextBox has a RequiredTextValidator. There is a CheckBox that determines if the TextBox is used or not. So the RequiredTextValidator must be disabled when the CheckBox is unmarked.





3. Add a CheckBox to your Web Form:

• Open the ToolBox and locate the CheckBox control.


• Set the ID property to CheckBox1.

• Set the Checked property to false. (When the form is first opened, the Validator should be disabled.)




• Set the ID property to TextBox1.






6. Set the following properties in the Properties Editor:

• ControlIDToEvaluate to TextBox1

• ErrorMessage to “This field is required.”

7. Set the Enabler property to the CheckStateCondition and associate it with CheckBox1. It should require the CheckBox to be checked.

• In the Properties Editor, click on the button to the right of the Enabler property. A form will appear.

• Select CheckStateCondition from the Condition DropDownList.

• Set ControlIDToEvaluate to CheckBox1.

• The Checked property defaults to true. So leave it alone.



• Click OK.

The RequiredTextValidator is complete.

8. Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the

Validator.






The ASP.NET Text for this tutorial is on the next page.





</head> <body> <form id="Form1" method="post" runat="server"> <p> <asp:CheckBox id=CheckBox1 runat="server"></asp:CheckBox> <vam:TextBox id=TextBox1 runat="server"></vam:TextBox> <vam:RequiredTextValidator id=RequiredTextValidator1 runat="server" ControlIDToEvaluate="TextBox1" ErrorMessage="This field is required." > <ErrorFormatterContainer> <vam:TextErrorFormatter></vam:TextErrorFormatter> </ErrorFormatterContainer> <EnablerContainer> <vam:CheckStateCondition ControlIDToEvaluate="CheckBox1"> </vam:CheckStateCondition> </EnablerContainer> </vam:RequiredTextValidator> </p> <p> <vam:Button id=Button1 runat="server"></vam:Button> </p> </form> </body> </html>



Requiring one mark amongst Checkboxes on DataGrid Rows Goal: Use the DataGrid to select one or more items, with a checkbox on each row.

What you will learn: The CountTrueConditionsValidator is designed to confirm a number of Conditions are true. It works well for confirming there are one or more checkboxes marked using the CheckStateCondition. Because the DataGrid’s rows are created by databinding, the CheckStateConditions must be added programmatically in the ItemCreated event.

Scenario: A DataGrid with a checkbox in each row will use a CountTrueConditionsValidator to ensure a minimum of 1 checkbox is marked.





3. Add a DataGrid to your Web Form:

• Open the ToolBox and locate the DataGrid control.


• Set the ID property to “DataGrid1”.

• Create one TemplateColumn (<asp:TemplateColumn>)

• Add an ItemTemplate to it (<ItemTemplate>)

• Add a CheckBox to it with the ID of “CheckBox1”.

Here is what the DataGrid should look like:

<asp:DataGrid id=DataGrid1 runat="server"> <Columns> <asp:TemplateColumn> <ItemTemplate> <asp:CheckBox id=CheckBox1 runat="server"></asp:CheckBox> </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:DataGrid>

4. Add a linebreak after the DataGrid: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Validator.

5. Add the CountTrueConditionsValidator to the last line:

• Open the ToolBox and locate the CountTrueConditionsValidator control. In VS.NET, it may be in a tab named “Professional Validation And More”.


• Place it below the DataGrid.

6. Set these properties in the RequiredTextValidator using the Properties Editor:

• ErrorMessage to “Please make at least one selection”.

• Set the ID property to “CountTrueConditionsValidator1”

• Set the Minimum property to 1.





8. Add the VAM Button control below the Validator.



• Place it below the DataGrid.

9. Create a DataSource and DataBind it to the DataGrid. In this example, the data will be strings in an ArrayList. Here is the code.

[C#]

private void Page_Load(object sender, System.EventArgs e) { if (!IsPostBack) FillInGrid(); } protected void FillInGrid() { // Strings in an ArrayList provide data to create rows System.Collections.ArrayList vDataSource = new System.Collections.ArrayList(); vDataSource.Add("Data Item 1"); vDataSource.Add("Data Item 2"); vDataSource.Add("Data Item 3"); vDataSource.Add("Data Item 4"); vDataSource.Add("Data Item 5"); vDataSource.Add("Data Item 6"); DataGrid1.DataSource = vDataSource; DataGrid1.DataBind(); }

[VB]

Private Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Page.Load If Not IsPostBack Then FillInGrid() End If End Sub Protected Sub FillInGrid() ' Strings in an ArrayList provide data to create rows System.Collections.ArrayList vDataSource = _ New System.Collections.ArrayList() vDataSource.Add("Data Item 1") vDataSource.Add("Data Item 2") vDataSource.Add("Data Item 3") vDataSource.Add("Data Item 4") vDataSource.Add("Data Item 5") vDataSource.Add("Data Item 6") DataGrid1.DataSource = vDataSource DataGrid1.DataBind() End Sub



10. Create an ItemCreated event on the DataGrid. Inside your ItemCreated method, do this:

• Use e.Item.FindControl() to find “CheckBox1”

• If found, create a CheckStateCondition object and assign the checkbox object to the ControlToEvaluate property

• Add the CheckStateCondition object to the Conditions property of CountTrueConditionsValidator1.

Here is the code:

[C#]

// in the Page.OnInit or Page_Load() method, // attach the ItemCreated event to the method DataGrid1.ItemCreated += new System.Web.UI.WebControls.DataGridItemEventHandler(DataGrid1_ItemCreated); // here is the method private void DataGrid1_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) { CheckBox vCB = (CheckBox) e.Item.FindControl("CheckBox1"); if (vCB != null) { PeterBlum.VAM.CheckStateCondition vCond = new PeterBlum.VAM.CheckStateCondition(); vCond.ControlToEvaluate = vCB; vCond.Checked = true; // this is the default CountTrueConditionsValidator1.Conditions.Add(vCond); } }

[VB]

Private Sub DataGrid1_ItemCreated(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _ Handles DataGrid1.ItemCreated Dim vCB As CheckBox = CType(e.Item.FindControl("CheckBox1"), CheckBox) if Not vCB Is Nothing Then Dim vCond As PeterBlum.VAM.CheckStateCondition = _ New PeterBlum.VAM.CheckStateCondition() vCond.ControlToEvaluate = vCB vCond.Checked = True ' this is the default CountTrueConditionsValidator1.Conditions.Add(vCond) End If End Sub







</head> <body> <form id="Form1" method="post" runat="server">

<p> <asp:DataGrid id=DataGrid1 runat="server"> <Columns> <asp:TemplateColumn> <ItemTemplate> <asp:CheckBox id=CheckBox1 runat="server"></asp:CheckBox> </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:DataGrid> </p> <p> <vam:CountTrueConditionsValidator id=CountTrueConditionsValidator1 runat="server" ErrorMessage="Please make at least one selection" Minimum="1"> </vam:CountTrueConditionsValidator> </p> <p> <VAM:Button id=Button1 runat="server"></VAM:Button> </p>

</form> </body> </html>



Setting up separate groups on a Web Form Goal: Allow multiple Submit buttons to only validate the desired fields

What you will learn: Use the Group property on each Validator and VAM Button. The button only runs Validators with the same string in the Group property.

Scenario: The Web Form has two sections: search and data entry. Both will use one TextBox, RequiredTextValidator and VAM Button.








• Set the ID property to “SearchTextBox”.

4. Add the VAM Button control to the right of the TextBox. It will be the Search Button.




• Set the Text property to “Search”.

• Set the Group property to “Search”. If you cannot find the Group property in the Properties Editor, you may have added the standard Microsoft Button. Remove it and locate the Button supplied with VAM.

5. Add the RequiredTextValidator to the right of the Search Button:



• Place it to the right of the Button.



• ControlIDToEvaluate to “SearchTextBox”.

• ErrorMessage to “This field is required”.

• Group to “Search”.

7. Add the following into the HTML view after the RequiredTextValidator. It will provide a visual separation.

<hr size="2">

8. Add a TextBox to your Web Form below the <hr> line. This will be for the data entry part of the form.





• Set the ID property to “DataTextBox”.

9. Add the RequiredTextValidator to the right of the TextBox button:





• ControlIDToEvaluate to “DataTextBox”.

• ErrorMessage to “This field is required. ”

• Group to “Data”.





• Place it below the lower TextBox.

• Set the Text property to “Submit”.

• Set the Group property to “Data”. If you cannot find the Group property in the Properties Editor, you may have added the standard Microsoft Button. Remove it and locate the Button supplied with VAM.







</head> <body> <form id="Form1" method="post" runat="server"> <p> <vam:TextBox id=SearchTextBox runat="server"></vam:TextBox> <vam:Button id=Button1 runat=server Group="Search" Text="Search"> </vam:Button> <vam:RequiredTextValidator id=RequiredTextValidator1 runat="server" ControlIDToEvaluate="SearchTextBox" ErrorMessage="This field is required." Group="Search" > <ErrorFormatterContainer> <vam:TextErrorFormatter></vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:RequiredTextValidator> </p> <hr size="2"> <p> <vam:TextBox id=DataTextBox runat="server"></vam:TextBox> <vam:RequiredTextValidator id=RequiredTextValidator2 runat="server" ControlIDToEvaluate="DataTextBox" ErrorMessage="This field is required." Group="Data" > <ErrorFormatterContainer> <vam:TextErrorFormatter></vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:RequiredTextValidator> </p> <p> <vam:Button id=Button1 runat="server" Group="Data" Text="Submit"> </vam:Button> </p> </form> </body> </html>



Setting the appearance of the error message What you will learn: There are many ways to customize the appearance of the error message. All utilize the ErrorFormatter property. This section offers many tutorials on customizing the appearance.

Before you begin: All tutorials here require that you have added a Validator to a Web Form. See the tutorial “Adding any Validator to your Web Form” if you need help.

These tutorials will have you edit the ErrorFormatter property within the Properties Editor. Follow these steps to open the ErrorFormatter property editor form:

• In design mode, click on the Validator control.


• Click on the button to the right of the ErrorFormatter property. The following form will appear:

Click on any of these topics to go them.

Change the font style information

Hide the error message

Make the error message take up much less space

Blink the error message

Place text before the error message

Change the default ErrorFormatter properties



Change the font style information Goal: To change the font or background of the error message.

What you will learn: There are three ways to change the font style. Each will be covered here.

Scenario: Change the font color to Green.

Case 1: Modifying the style sheet file supplied by VAM When you set up the <link> tag to use the URL “/VAM/Appearance/VAMStyleSheet.css”, your Validator automatically uses the style sheet class name “VAMErrorText”. Edit this class to your desired style.

• Open the VAMStyleSheet.css file in a text editor or Visual Studio.Net. The file is located in the \VAM\Appearance of your web application folder.

• Locate the class “VAMErrorText”. Here is the default:

.VAMErrorText { color: red; }

• Change the style. In this case, change ‘color’ to ‘Green’.

.VAMErrorText { color: green; }

• Save the file.

Case 2: Using your own style sheet file You can create style sheet class names in another style sheet file. Once defined, assign the ErrorFormatter.CssClass property to the name of the class.

• Open your style sheet file in a text editor or Visual Studio.Net.

• Create a new class with the desired styles. In this example, it will be “ErrorMessages”.

.ErrorMessages { color: green; }

• Save the file.

• In the ErrorFormatter property editor form, change the CssClass property to “ErrorMessages”.

ASP.NET Text for the <ErrorFormatterContainer> node within a Validator <vam:Validatorclass [properties] > <ErrorFormatterContainer> <vam:TextErrorFormatter CssClass="ErrorMessages"> </vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:Validatorclass>

Case 3: Using style properties in the ErrorFormatter class You can override using the style sheet files by assigning values to the style properties of the ErrorFormatter class.

• In the ErrorFormatter property editor form, change the CssClass property to "".

• Change the ForeColor property to Green.



ASP.NET Text for the <ErrorFormatterContainer> node within a Validator <vam:Validatorclass [properties] > <ErrorFormatterContainer> <vam:TextErrorFormatter CssClass="" ForeColor="Green"> </vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:Validatorclass>

Hide the error message Goal: Prevent the Validator from showing its error message on individual fields.

What you will learn: When you use the ValidationSummary control, you may want to remove the error message from showing as individual fields.

• In the ErrorFormatter property editor form, change the Display property to None.

ASP.NET Text for the <ErrorFormatterContainer> node within a Validator <vam:Validatorclass [properties] > <ErrorFormatterContainer> <vam:TextErrorFormatter Display=None > </vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:Validatorclass>

Make the error message take up much less space Goal: To substitute a different format for the textual error message designed to reduce the space used.

What you will learn: There are several ErrorFormatter classes. Each displays the error message in a different way. By default, the TextErrorFormatter class is used and it consumes the most screen space. The other ErrorFormatter classes take much less space by virtue of putting the error message into an alert box or tooltip.

Scenario: To reduce the space, have the Validator control show the image and show an alert box when clicked.

• In the ErrorFormatter property editor form, change the ErrorFormatter DropDownList to “Image with Alert Box”.

• The image defaults to . If you want to change it, edit the ImageUrl property. VAM supplies an animated version of the same graphic. Set ImageUrl to ~/VAM/Appearance/ValErrorIcon_animated.gif.

ASP.NET Text for the <ErrorFormatterContainer> node within a Validator <vam:Validatorclass [properties] > <ErrorFormatterContainer> <vam:AlertImageErrorFormatter> </vam:AlertImageErrorFormatter> </ErrorFormatterContainer> </vam:Validatorclass>

Blink the error message Goal: Attract the user’s attention by blinking the error message.

What you will learn: You can set up page-level properties to blink all error messages on the page. Page-level properties must be set programmatically.

Scenario: Blink the error message three times after the user incorrectly changes the data entry field. Blink it continuously when they submit and the Validator reports an error.

• Go to the Page_Load() method in the code behind file or create one in the <script runat=server> section of your Web Form.



• Add this line to blink the error message three times after a change to the field.

[C#]

PeterBlum.VAM.Globals.Page.BlinkOnChange = PeterBlum.VAM.BlinkMode.Three;

[VB]

PeterBlum.VAM.Globals.Page.BlinkOnChange = PeterBlum.VAM.BlinkMode.Three

• Add this line to blink the error message continuously when submitting the page.

[C#]

PeterBlum.VAM.Globals.Page.BlinkOnSubmit = PeterBlum.VAM.BlinkMode.On;

[VB]

PeterBlum.VAM.Globals.Page.BlinkOnSubmit = PeterBlum.VAM.BlinkMode.On

• If you are using a code behind file, compile your web application.

Note: If you would like to set the defaults for PeterBlum.VAM.Globals.Page so that all pages reflect these settings, use the Global Settings Editor application. It is in the Start menu under “Professional Validation And More”.

Place text before the error message Goal: Add static text to the ErrorFormatter so that it appears before the error message.

What you will learn: The TextErrorFormatter offers the property BeforeHTML for you to put any static text or HTML that is placed before the error message. If you assign HTML into this property, you can create new formats. Use the AfterHTML tag to include any HTML that closes the error message.

Scenario: Show the text “Error: ” prior to the error message. Make it bold.

• In the ErrorFormatter property editor form, change the BeforeHTML property to “<b>Error: </b>”.

ASP.NET Text for the <ErrorFormatterContainer> node within a Validator <vam:Validatorclass [properties] > <ErrorFormatterContainer> <vam:TextErrorFormatter BeforeHTML="<b>Error: </b>" > </vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:Validatorclass>

Change the default ErrorFormatter properties Goal: Make all your property settings to one ErrorFormatter appear on other Validators automatically.

What you will learn: The ErrorFormatter properties editor form can update the defaults for its properties. Any Validator created after these defaults are made will use these defaults. The ErrorFormatter properties editor form also lets you create new names for ErrorFormatters in its DropDownList, each with its own property settings. This lets you create several rules and apply them simply by selecting a name.

Scenario: Make the “Text” ErrorFormatter so that its default for the ForeColor property is Green.

• Open the ErrorFormatter property editor form.

• Set the ErrorFormatter DropDownList to Text.

• Set the ForeColor property to Green.

• Click the Save… button.



• Leave the Name at the default and click Save.

• Answer Yes to the confirmation MessageBox.

• In any Validator added after this, using the “Text” ErrorFormatter will assign ForeColor to Green.

• In any existing Validator, you can assign this default by opening its ErrorFormatter property editor and clicking the Revert button.

Warning: You have changed the default for Text ErrorFormatters for the web application you are editing. Unless you want green fonts for error messages, you should change it back.



Enhancing the ValidationSummary Goal: Use the properties of the ValidationSummary control to expand its formatting and make it more interactive.

What you will learn: Customizing the style sheet classes of the ValidationSummary to adjust its formatting. You will add the following: header; a Label that is shown and hidden with the ValidationSummary; hyperlinks on each error message. You will set the ValidationSummary to automatically update as errors are corrected.

Scenario: The Web Form contains two TextBoxes. Each is required. A VAM Button appears below the TextBoxes. The ValidationSummary control appears below the VAM Button. A Label telling users to fix the errors below appears above everything.





3. Add a Label to your Web Form:

• Open the ToolBox and locate the Label control.


• Set ID to ‘FixErrorsLabel’.

• Set Text to ‘Fix the errors below’.

• Set ForeColor to White.

• Set BackColor to Red.

4. Add a linebreak after the Label: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Label.




• Set the ID property to “TextBox1”.






7. Set these properties in the RequiredTextValidator using the Properties Editor.

• ControlIDToEvaluate to “TextBox1”.


• SummaryErrorMessage to “The top field requires an entry.”







• Set the ID property to “TextBox2”.




• Place it to the right of TextBox2.




• SummaryErrorMessage “The bottom field requires an entry”.







14. Add a linebreak after the Button: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Button.

15. Add the ValidationSummary control to the new line.

• Open the ToolBox and locate the ValidationSummary control. In VS.NET, it may be in a tab named “Professional Validation And More”.


• Place it below the Button.

16. Set these properties in the ValidationSummary using the Properties Editor:

• HeaderText to “Correct these errors:”.

• HyperLinkToFields to true.

• AutoUpdate to true.

• RelatedControlID to “FixErrorsLabel”.

17. Change the style sheet class for the header text to use Green text.

• Open the VAMStyleSheet.css file in a text editor or Visual Studio.Net. The file is located in the \VAM\Appearance of your web application folder.

• Locate the class “VAMValSummaryHeader”. Here is the default:



.VAMValSummaryHeader { color: red; }

• Change the style in both “VAMValSummaryHeader” and “VAMValSummaryHeader TR”. In this case, change ‘color’ to ‘green’.

.VAMValSummaryHeader { color: green; } .VAMValSummaryHeader TR { color: green; }

• Save the file.







</head> <body> <form id="Form1" method="post" runat="server"> <p> <asp:Label id=FixErrorsLabel runat="server" ForeColor="White" BackColor="Red">Fix the errors below: </asp:Label> </p> <p> <vam:TextBox id=TextBox1 runat="server"></vam:TextBox> <vam:RequiredTextValidator id=RequiredTextValidator1 runat="server" ControlIDToEvaluate="TextBox1" ErrorMessage="This field is required." SummaryErrorMessage="The top field requires an entry." > <ErrorFormatterContainer> <vam:TextErrorFormatter></vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:RequiredTextValidator> </p> <p> <vam:TextBox id=TextBox2 runat="server"></vam:TextBox> <vam:RequiredTextValidator id=RequiredTextValidator2 runat="server" ControlIDToEvaluate="TextBox2" ErrorMessage="This field is required." SummaryErrorMessage="The bottom field requires an entry." > <ErrorFormatterContainer> <vam:TextErrorFormatter></vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:RequiredTextValidator> </p> <p> <vam:Button id=Button1 runat="server" Text="Submit"></vam:Button> </p> <p> <vam:ValidationSummary id=ValidationSummary1 runat="server" HeaderText="Correct these errors:" HyperLinkToFields=true AutoUpdate=true RelatedControlID="FixErrorsLabel" > </vam:ValidationSummary> </p> </form> </body> </html>



Getting the user’s attention to the error in other ways Goal: Attract the user’s attention to the field with the error.

What you will learn: The error message within the ErrorFormatter and the ValidationSummary control are two ways to attract the user’s attention to the problem. Both of these are covered in previous tutorials. This tutorial shows how to set up several other attention-getting techniques: setting focus to the field with the error; changing the background color of the field with the error; and changing the color of the label to the field with the error.

Scenario: Your Web Form has a TextBox with a Label. It uses a RequiredTextValidator on the TextBox and includes a Submit button. You want to attract the user’s attention to the TextBox.





3. Add a Label to your Web Form:



• Set ID to “FullNameLabel”.

• Set Text to “Full Name”.




• Set ID to “TextBox1”.









7. Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<BR>’ after the Validator.








9. Use the HiliteFields property to identify the FullNameLabel for a color change:


• Click on the button to the right of the HiliteFields property.

• Click Add.

• Set the ControlID property to “FullNameLabel”.

• Click OK.

10. Go to the Page_Load() method in the code behind file or create one in the <script runat=server> section of your Web Form.

• Add this line to set focus to the field with the error.

[C#]

PeterBlum.VAM.Globals.Page.FocusOnChange = true;

[VB]

PeterBlum.VAM.Globals.Page.FocusOnChange = True

• The page-level property ControlErrorCssClass identifies a style sheet class that sets the style of the field when there is an error. The VAMStyleSheet.css file predefines the class name “VAMFieldWithError” for this property to use.

[C#]

PeterBlum.VAM.Globals.Page.ControlErrorCssClass = "VAMFieldWithError";

[VB]

PeterBlum.VAM.Globals.Page.ControlErrorCssClass = "VAMFieldWithError"

• Edit the VAMFieldWithError class to the style of your choosing. Here is its default:

.VAMFieldWithError { background-color: lightpink; }

• The page-level property TextHiliteFieldsCssClass identifies a style sheet class that sets the style for any Label control added to the HiliteFields property. The VAMStyleSheet.css file predefines the class name “VAMTextHiliteFields” for this property to use.

[C#]

PeterBlum.VAM.Globals.Page.TextHiliteFieldsCssClass = "VAMTextHiliteFields";

[VB]

PeterBlum.VAM.Globals.Page.TextHiliteFieldsCssClass = "VAMTextHiliteFields"

• Edit the VAMFieldWithError class to the style of your choosing. Here is its default:

.VAMTextHiliteFields { }



Change it to:

.VAMTextHiliteFields { color: red; }


• Save the VAMStyleSheet.css file.

Note: If you would like to set the defaults for PeterBlum.VAM.Globals.Page so that all pages reflect these settings, use the Global Settings Editor application. It is in the Start menu under “Professional Validation And More”.




</head> <body> <form id="Form1" method="post" runat="server"> <p> <asp:Label id=FullNameLabel runat="server">Full Name</asp:Label> <vam:TextBox id=TextBox1 runat="server"></vam:TextBox> <vam:RequiredTextValidator id=RequiredTextValidator1 runat="server" ControlIDToEvaluate="TextBox1" ErrorMessage="This field is required" > <ErrorFormatterContainer> <vam:TextErrorFormatter></vam:TextErrorFormatter> </ErrorFormatterContainer> <HiliteFields> <vam:ControlConnection ControlID="FullNameLabel" /> </HiliteFields> </vam:RequiredTextValidator> </p> <p> <vam:Button id=Button1 runat="server" Text="Submit"></vam:Button> </p> </form> </body> </html>



Localizing the formatting rules of dates and currencies in the DataType property Goal: Customize the format accepted by Validators for date, double, and currency.

What you will learn: When a Validator has its DataType property set to Date, Double, or Currency, it uses the CultureInfo object in PeterBlum.VAM.Globals.Page.CultureInfo to establish the formatting rules.

Scenario: Use a DataTypeCheckValidator to confirm that a TextBox contains a date in the format yyyy-MM-dd.








• Set the ID to “TextBox1”.

4. Add the DataTypeCheckValidator to your Web Form:





5. Set these properties in the DataTypeCheckValidator using the Properties Editor:


• ErrorMessage to “Incorrect format”.

• DataType to Date.







8. Go to the Page_Load() method in the code behind file or create one in the <script runat=server> section of your Web Form.

• Add this code. It clones the current CultureInfo because the original is not editable. Then it edits the new object’s DateTimeFormat.ShortDatePattern property. Finally, it assigns the result to the page-level CultureInfo property.



[C#]

System.Globalization.CultureInfo vNewCulture = (System.Globalization.CultureInfo) PeterBlum.VAM.Globals.Page.CultureInfo.Clone(); vNewCulture.DateTimeFormat.ShortDatePattern = "yyyy-MM-dd"; vNewCulture.DateTimeFormat.DateSeparator ="-"; PeterBlum.VAM.Globals.Page.CultureInfo = vNewCulture;

[VB]

Dim vNewCulture As System.Globalization.CultureInfo = _ CType(PeterBlum.VAM.Globals.Page.CultureInfo.Clone(), _ System.Globalization.CultureInfo) vNewCulture.DateTimeFormat.ShortDatePattern = "yyyy-MM-dd" vNewCulture.DateTimeFormat.DateSeparator ="-" PeterBlum.VAM.Globals.Page.CultureInfo = vNewCulture





</head> <body> <form id="Form1" method="post" runat="server"> <p> <vam:TextBox id=TextBox1 runat="server"></vam:TextBox> <vam:DataTypeCheckValidator id=DataTypeCheckValidator1 runat="server" ControlIDToEvaluate="TextBox1" DataType="Date" ErrorMessage="Incorrect format" > <ErrorFormatterContainer> <vam:TextErrorFormatter></vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:DataTypeCheckValidator> </p> <p> <vam:Button id=Button1 runat="server" Text="Submit"></vam:Button> </p> </form> </body> </html>



Adding Required Field Markers Goal: Show the Required Field Markers next to fields and a descriptive message at the top of the form.

What you will learn: VAM includes quick and easy support for Required Field Markers. While it may be easy to add Label or Image webcontrols to your form to become Required Field Markers, VAM’s system makes things easier because all text and images are defined globally so that as soon as you add the control, it looks consistent throughout your site.

Scenario: The form has two TextBoxes, each with a RequiredTextValidator. Above the textboxes is a description of the Required Field Markers, using a RequiredFieldDescription control. The first TextBox’s RequiredTextValidator appears to the right of the TextBox. This will use the Validator’s ShowRequiredFieldMarker property. The second TextBox’s RequiredTextValidator appears below the field. To still show the Required Field Marker to the right of that TextBox, use a RequiredFieldMarker control.





3. Add a RequiredFieldDescription control to your Web Form.

• Open the ToolBox and locate the RequiredFieldDescription control. In VS.NET, it may be in a tab named “Professional Validation And More”.


4. Add a linebreak after the RequiredFieldDescription: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the RequiredFieldDescription.




• Set the ID to “TextBox1”.









• ShowRequiredFieldMarker to true.








10. Add the RequiredFieldMarker to your Web Form:

• Open the ToolBox and locate the RequiredFieldMarker control. In VS.NET, it may be in a tab named “Professional Validation And More”.



11. Add a linebreak after the RequiredFieldMarker: Either type an ENTER keystroke or in HTML view, enter ‘<BR>’ after the RequiredFieldMarker.




• Place it below TextBox2.




14. Add a linebreak after the RequiredTextValidator: Either type an ENTER keystroke or in HTML view, enter ‘<BR>’ after the RequiredTextValidator.




• Place it below the lower RequiredTextValidator.








</head> <body> <form id="Form1" method="post" runat="server"> <p> <vam:RequiredFieldDescription id=RequiredFieldDescription1 runat="server"> </vam:RequiredFieldDescription> </p> <p> <vam:TextBox id=TextBox1 runat="server"></vam:TextBox> <vam:RequiredTextValidator id=RequiredTextValidator1 runat="server" ControlIDToEvaluate="TextBox1" ErrorMessage="This field is required." ShowRequiredFieldMarker=true > <ErrorFormatterContainer> <vam:TextErrorFormatter></vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:RequiredTextValidator> </p> <p> <vam:TextBox id=TextBox2 runat="server"></vam:TextBox> <vam:RequiredFieldMarker id=RequiredFieldMarker1 runat="server" > </vam:RequiredFieldMarker> </p> <p> <vam:RequiredTextValidator id=RequiredTextValidator2 runat="server" ControlIDToEvaluate="TextBox2" ErrorMessage="This field is required." > <ErrorFormatterContainer> <vam:TextErrorFormatter></vam:TextErrorFormatter> </ErrorFormatterContainer> </vam:RequiredTextValidator> </p> <p> <vam:Button id=Button1 runat="server" Text="Submit"></vam:Button> </p> </form> </body> </html>



Adding a FieldStateController to your Web Form Goal: Add a FieldStateController

What you will learn: The basic steps to adding a FieldStateController to the page. There are three areas to the FieldStateController, all of which need to be setup: what to monitor (Condition property); the control to change (ControlIDToChange property); and the rules to change the state (ConditionFalse and ConditionTrue properties.)

Scenario: Make a TextBox that is shown and hidden as you toggle a CheckBox.


2. Add a CheckBox control to your Web Form. This will be monitored for clicks to execute the FieldStateController.



• Set ID to “CheckBox1”.

3. Add a TextBox to your Web Form. This will be the control whose state will change.




4. Add the FieldStateController to your Web Form:

• Open the ToolBox and locate the FieldStateController control. In VS.NET, it may be in a tab named “Professional Validation And More”.


• Place it anywhere you like. The location does not really matter since the control doesn’t appear on your form at runtime.

5. Set the Condition property to the CheckStateCondition using the Properties Editor:

• Click on the button to the right of the Condition property. A form will appear.


• Set ControlIDToEvaluate to “CheckBox1”.


• Click OK.



6. Set these properties in the FieldStateController using the Properties Editor:

• ControlIDToChange to “TextBox1”.

• Open the ConditionFalse property to reveal its child properties.

• Set the Visible property to false. When the CheckStateCondition detects the checkbox is unmarked, hide TextBox1. When it detects the checkbox is marked, it uses the ConditionTrue.Visible property that is already true.





ASP.NET Text For This Tutorial <%@ Page [properties depend on your language and development tool] %> <%@ Register TagPrefix="vam" Namespace="PeterBlum.VAM" Assembly="PeterBlum.VAM" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>Web Form1</title> there may be some <meta> tags here </head> <body> <form id="Form1" method="post" runat="server"> <asp:CheckBox id=CheckBox1 runat="server"></asp:CheckBox> <vam:TextBox id=TextBox1 runat="server"></vam:TextBox>

<vam:FieldStateController id=FieldStateController1 runat="server" ControlIDToChange="TextBox1" Condition="CheckStateCondition: CheckBox1 is checked" ConditionFalse-Visible=false > <ConditionContainer> <vam:CheckStateCondition ControlIDToEvaluate="CheckBox1" Name="CheckStateCondition"> </vam:CheckStateCondition> </ConditionContainer>

</vam:FieldStateController> </form> </body> </html>



Changing the state of several fields Goal: To use the MultiFieldStateController to change the state of several controls.

What you will learn: The basic steps to adding a MultiFieldStateController to the page. You will change the visibility of several controls. When changing visibility, you can put all of the fields that will be shown and hidden into one Panel control and change the visibility of the Panel.

Scenario: Make three controls whose visibility will change as you toggle a CheckBox. They will all be shown when the checkbox is marked and hidden when unmarked. Two of the controls will be placed into a Panel control so that you only need to change the visibility of the panel.






3. Add a TextBox to your Web Form. This will be the control whose state will change.




4. Add a Panel to your Web Form. All child controls of this control will have their visibility change.

• Open the ToolBox and locate the Panel control.


• Set ID to “Panel1”.

5. Add a TextBox to the Panel. Set ID to “TextBox2”.

6. Add another TextBox to the Panel. Set ID to “TextBox3”.

7. Add the MultiFieldStateController to your Web Form:

• Open the ToolBox and locate the MultiFieldStateController control. In VS.NET, it may be in a tab named “Professional Validation And More”.



8. Set the Condition property to the CheckStateCondition using the Properties Editor:





• Click OK.

9. Add ‘TextBox1’ and ‘Panel1’ to the ControlConnections property.

• Click on the button to the right of the ControlConnections property in the Properties Editor.

• Click Add.



• Set ControlID to “TextBox1”.

• Click Add.

• Set ControlID to “Panel1”.

• Click OK.

10. Set the ConditionFalse.Visible property in the FieldStateController using the Properties Editor:


• Set the Visible property to false. When the CheckStateCondition detects the checkbox is unmarked, hide the textboxes-. When it detects the checkbox is marked, it uses the ConditionTrue.Visible property that is already true.





ASP.NET Text For This Tutorial <%@ Page [properties depend on your language and development tool] %> <%@ Register TagPrefix="vam" Namespace="PeterBlum.VAM" Assembly="PeterBlum.VAM" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>Web Form1</title> there may be some <meta> tags here </head> <body> <form id="Form1" method="post" runat="server"> <asp:CheckBox id=CheckBox1 runat="server"></asp:CheckBox> <vam:TextBox id=TextBox1 runat="server"></vam:TextBox> <asp:Panel id=Panel1 runat="server"> <vam:TextBox id=TextBox2 runat="server"></vam:TextBox> <vam:TextBox id=TextBox3 runat="server"></vam:TextBox> </asp:Panel>

<vam:MultiFieldStateController id=MultiFieldStateController1 runat="server" Condition="CheckStateCondition: CheckBox1 is checked" ConditionFalse-Visible=false > <ConditionContainer> <vam:CheckStateCondition ControlIDToEvaluate="CheckBox1" Name="CheckStateCondition"> </vam:CheckStateCondition> </ConditionContainer> <ControlConnections> <vam:FSAControlConnection ControlID="TextBox1"> </vam:FSAControlConnection> <vam:FSAControlConnection ControlID="Panel1"> </vam:FSAControlConnection> </ControlConnections>

</vam:MultiFieldStateController> </form> </body> </html>



Changing the URL of a hyperlink Goal: Use the FieldStateController to change the URL of a HyperLink control.

What you will learn: A HyperLink control generates the HTML <a href="[URL]">. The href= attribute can be modified by the FieldStateController using its ConditionTrue.URL and ConditionFalse.URL property. You only need to set one of these properties. Leaving the other blank will use the original URL assigned to the HyperLink.

Scenario: Make a HyperLink whose URL toggles between www.yahoo.com and www.google.com as you toggle a CheckBox.






3. Add a HyperLink to your Web Form. This will be the control whose state will change.

• Open the ToolBox and locate the HyperLink control.


• Set ID to “HyperLink1”.

• Set NavigateUrl to “http://www.google.com”.

• Set Text to “Search Engine”.





5. Set the Condition property to the CheckStateCondition using the Properties Editor.





• Click OK.

6. Set these properties in the FieldStateController using the Properties Editor.

• Set the ControlIDToChange property to “HyperLink1”.

• Open the ConditionTrue property to reveal its child properties.

• Set the URL property to “http://www.yahoo.com”. When the CheckStateCondition detects the checkbox is unmarked, it uses the default URL, “http://www.google.com”.



http://www.yahoo.com/

http://www.google.com/



ASP.NET Text For This Tutorial <%@ Page [properties depend on your language and development tool] %> <%@ Register TagPrefix="vam" Namespace="PeterBlum.VAM" Assembly="PeterBlum.VAM" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>Web Form1</title> there may be some <meta> tags here </head> <body> <form id="Form1" method="post" runat="server"> <asp:CheckBox id=CheckBox1 runat="server"></asp:CheckBox> <asp:HyperLink id=HyperLink1 runat="server" NavigateUrl="http://www.google.com">Search Engine </asp:HyperLink>

<vam:FieldStateController id=FieldStateController1 runat="server" ControlIDToChange="HyperLink1" Condition="CheckStateCondition: CheckBox1 is checked" ConditionTrue-URL="http://www.hyperlink.com" > <ConditionContainer> <vam:CheckStateCondition ControlIDToEvaluate="CheckBox1" Name="CheckStateCondition"> </vam:CheckStateCondition> </ConditionContainer>




Changing the font of a Label Goal: Use the FieldStateController to change the style of a field.

What you will learn: The FieldStateController can change any style attribute on the control you want to change. You must know the correct style sheet attribute names and values to use this feature.

Scenario: Make a Label whose font color (style.color) toggles between green and red as you toggle a CheckBox.






3. Add a Label to your Web Form. This will be the control whose state will change.

• Open the ToolBox and locate the HyperLink control.


• Set ID to “Label1”.

• Set ForeColor to Green.

• Set Text to “Colorful label”










• Click OK.


• Set the ControlIDToChange property to “Label1”.

• Open the ConditionTrue property to reveal its child properties.

• Open the Other property to reveal its child properties.

• Set the AttributeName property to “color”. This property is case sensitive!

• Set the AttributeType property to “Style”.

• Set the DataType property to “String”

• Set the Value property to “red”.



ASP.NET Text For This Tutorial <%@ Page [properties depend on your language and development tool] %> <%@ Register TagPrefix="vam" Namespace="PeterBlum.VAM" Assembly="PeterBlum.VAM" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>Web Form1</title> there may be some <meta> tags here </head> <body> <form id="Form1" method="post" runat="server"> <asp:CheckBox id=CheckBox1 runat="server"></asp:CheckBox> <asp:Label id=Label1 runat="server" ForeColor=Green>Colorful label </asp:Label>

<vam:FieldStateController id=FieldStateController1 runat="server" ControlIDToChange="Label1" Condition="CheckStateCondition: CheckBox1 is checked" ConditionTrue-Other-AttributeName="color" ConditionTrue-Other-AttributeType="Style" ConditionTrue-Other-Value="red"> <ConditionContainer> <vam:CheckStateCondition ControlIDToEvaluate="CheckBox1" Name="CheckStateCondition"> </vam:CheckStateCondition> </ConditionContainer>




Using the FieldStateController to monitor RadioButtons Goal: Use the FieldStateController to make changes based on a group of RadioButtons. (Note that the RadioButtonList works automatically with FieldStateController. This topic is for a group of separate RadioButton controls.)

What you will learn: When using RadioButtons to execute the FieldStateController, you should setup the CheckStateCondition on the radio button that will be marked to run the controller. The other RadioButtons should be added into the ExtraControlsToRunThisAction property.

Scenario: The Web Form has three RadioButtons and a Label. When the first RadioButton is marked, the Label is visible. When others are marked, it is invisible.


2. Add a RadioButton control to your Web Form:



• Set ID to “RadioButton1”.

• Set Text to “1”.

3. Add a second RadioButton control to the right of the first. Set ID to “RadioButton2”. Set Text to “2”.

4. Add a third RadioButton control to the right. Set ID to “RadioButton3”. Set Text to “3”.

5. Add a Label control to the right:



• Set ID to “Label1”.

• Set Text to “Shown when 1 is marked”.








• Set ControlIDToEvaluate to “RadioButton1”.


• Click OK.


• Set the ControlIDToChange property to “Label1”.


• Set the Visible property to false.

9. Add ‘RadioButton2’ and ‘RadioButton3’ to the ExtraControlsToRunThisAction property:



• Click on the button to the right of the ExtraControlsToRunThisAction property in the Properties Editor.

• Click Add.

• Set ControlID to “RadioButton2”.

• Click Add.

• Set ControlID to “RadioButton3”.

• Click OK.


ASP.NET Text For This Tutorial <%@ Page [properties depend on your language and development tool] %> <%@ Register TagPrefix="vam" Namespace="PeterBlum.VAM" Assembly="PeterBlum.VAM" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>Web Form1</title> there may be some <meta> tags here </head> <body> <form id="Form1" method="post" runat="server"> <asp:RadioButton id=RadioButton1 runat="server"></asp:RadioButton> <asp:RadioButton id=RadioButton2 runat="server"></asp:RadioButton> <asp:RadioButton id=RadioButton3 runat="server"></asp:RadioButton> <asp:Label id=Label1 runat="server">Show when 1 is marked</asp:Label>

<vam:FieldStateController id=FieldStateController1 runat="server" ControlIDToChange="Label1" Condition="CheckStateCondition: RadioButton1 is checked" ConditionFalse-Visible=false > <ConditionContainer> <vam:CheckStateCondition ControlIDToEvaluate="RadioButton1" Name="CheckStateCondition"> </vam:CheckStateCondition> </ConditionContainer> <ExtraControlsToRunThisAction> <vam:ControlConnection ControlID="RadioButton2"> </vam:ControlConnection> <vam:ControlConnection ControlID="RadioButton3"> </vam:ControlConnection> </ExtraControlsToRunThisAction>


tutorials - validation users guide

Documents