P. 1
Tutorials - Validation Users Guide

Tutorials - Validation Users Guide

|Views: 549|Likes:
Published by kushin
Professional Validation And More v3.0.11
Professional Validation And More v3.0.11

More info:

Published by: kushin on Dec 15, 2008
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

05/09/2014

pdf

text

original

Sections

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 Support@PeterBlum.com. 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 Contact@PeterBlum.com. 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. .

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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

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

Page 2 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 2. Add a Web Form to your web application. 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: • • • 4. • • • 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.

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”. Drag it onto your Web Form. 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: • • • • 6. Click on the RequiredTextValidator. Open the Properties Editor. Drop down the list on the ControlIDToEvaluate property. Select TextBox1.

Set the ErrorMessage property to “This field is required.” The RequiredTextValidator is complete.

7. 8.

Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Validator. 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”. Drag it onto your Web Form. Place it below the TextBox. Page 3 of 49

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

Professional Validation And More v3.0 Tutorials 9. The form is complete. You can test it.

Last Updated: 10/17/2006 Peter Blum

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 <link href="/VAM/Appearance/VAMStyleSheet.css" type="text/css" rel="stylesheet"> </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>

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

Page 4 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. 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: • • • 4. • • • 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 to TextBox1.

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”. Drag it onto your Web Form. 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 following properties on the MultiConditionValidator in the Properties Editor: • • 6. ErrorMessage to “Enter a decimal value”. Operator to AND.

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

7.

Click the Add Button. Page 5 of 49

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

Professional Validation And More v3.0 Tutorials 8. Select RequiredTextCondition and click OK. The Add Condition form appears.

Last Updated: 10/17/2006 Peter Blum

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:

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

Page 6 of 49

Professional Validation And More v3.0 Tutorials 13. Click OK. The MultiConditionValidator is complete.

Last Updated: 10/17/2006 Peter Blum

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. • • • Open the ToolBox and locate VAM’s Button control. In VS.NET, it may be in a tab named “Professional Validation And More”. Drag it onto your Web Form. Place it below the TextBox.

16. 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 <link href="/VAM/Appearance/VAMStyleSheet.css" type="text/css" rel="stylesheet"> </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>

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

Page 7 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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: • • 2. RequiredTextCondition RequiredListCondition

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.

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

Page 8 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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 <link href="/VAM/Appearance/VAMStyleSheet.css" type="text/css" rel="stylesheet"> </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>

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

Page 9 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. 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 CheckBox to your Web Form: • • • • 4. • • • 5. • • • Open the ToolBox and locate the CheckBox control. Drag it onto your Web Form. Set the ID property to CheckBox1. Set the Checked property to false. (When the form is first opened, the Validator should be disabled.)

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.

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”. Drag it onto your Web Form. 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. 6. Set the following properties in the Properties Editor: • • 7. ControlIDToEvaluate to TextBox1 ErrorMessage to “This field is required.”

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. Page 10 of 49

• The Checked property defaults to true. So leave it alone. Copyright © 2004-2006 Peter L. Blum. All Rights Reserved

Professional Validation And More v3.0 Tutorials • Click OK. The RequiredTextValidator is complete.

Last Updated: 10/17/2006 Peter Blum

8. 9.

Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Validator. 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”. Drag it onto your Web Form. Place it below the TextBox.

10. The form is complete. You can test it. The ASP.NET Text for this tutorial is on the next page.

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

Page 11 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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 <link href="/VAM/Appearance/VAMStyleSheet.css" type="text/css" rel="stylesheet"> </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>

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

Page 12 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. 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 DataGrid to your Web Form: • • • • • • Open the ToolBox and locate the DataGrid control. Drag it onto your Web Form. 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. 5. Add a linebreak after the DataGrid: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Validator. Add the CountTrueConditionsValidator to the last line: • • • 6. • • • Open the ToolBox and locate the CountTrueConditionsValidator control. In VS.NET, it may be in a tab named “Professional Validation And More”. Drag it onto your Web Form. Place it below the DataGrid.

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. Page 13 of 49

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

Professional Validation And More v3.0 Tutorials Note: The Validator should have a red font color. If not, the style sheet URL is incorrect. 7. 8.

Last Updated: 10/17/2006 Peter Blum

Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Validator. Add the VAM Button control below the Validator. • • • Open the ToolBox and locate VAM’s Button control. In VS.NET, it may be in a tab named “Professional Validation And More”. Drag it onto your Web Form. 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

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

Page 14 of 49

Professional Validation And More v3.0 Tutorials 10. Create an ItemCreated event on the DataGrid. Inside your ItemCreated method, do this: • • • Use e.Item.FindControl() to find “CheckBox1”

Last Updated: 10/17/2006 Peter Blum

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 11. The form is complete. You can test it. The ASP.NET Text for this tutorial is on the next page.

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

Page 15 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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 <link href="/VAM/Appearance/VAMStyleSheet.css" type="text/css" rel="stylesheet"> </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>

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

Page 16 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. 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: • • • 4. • • • • • 5. 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 “SearchTextBox”.

Add the VAM Button control to the right of the TextBox. It will be the Search Button. Open the ToolBox and locate VAM’s Button control. In VS.NET, it may be in a tab named “Professional Validation And More”. Drag it onto your Web Form. Place it to the right of the TextBox. 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.

Add the RequiredTextValidator to the right of the Search Button: • • • Open the ToolBox and locate the RequiredTextValidator control. In VS.NET, it may be in a tab named “Professional Validation And More”. Drag it onto your Web Form. Place it to the right of the Button.

Note: The Validator should have a red font color. If not, the style sheet URL is incorrect. 6. Set these properties in the RequiredTextValidator using the Properties Editor: • • • 7. ControlIDToEvaluate to “SearchTextBox”. ErrorMessage to “This field is required”. Group to “Search”.

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. Page 17 of 49

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

Professional Validation And More v3.0 Last Updated: 10/17/2006 Tutorials Peter Blum • 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. • • 9. • • • • • • Drag it onto your Web Form. Set the ID property to “DataTextBox”.

Add the RequiredTextValidator to the right of the TextBox button: Open the ToolBox and locate the RequiredTextValidator control. In VS.NET, it may be in a tab named “Professional Validation And More”. Drag it onto your Web Form. Place it to the right of the TextBox.

10. Set these properties in the RequiredTextValidator using the Properties Editor: ControlIDToEvaluate to “DataTextBox”. ErrorMessage to “This field is required. ” Group to “Data”.

11. Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Validator. 12. 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”. Drag it onto your Web Form. 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.

13. The form is complete. You can test it. The ASP.NET Text for this tutorial is on the next page.

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

Page 18 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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 <link href="/VAM/Appearance/VAMStyleSheet.css" type="text/css" rel="stylesheet"> </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>

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

Page 19 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. Open the Properties Editor. 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 Copyright © 2004-2006 Peter L. Blum. All Rights Reserved

Page 20 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. Page 21 of 49

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

Professional Validation And More v3.0 Last Updated: 10/17/2006 Tutorials Peter Blum 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. Page 22 of 49

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

Professional Validation And More v3.0 Tutorials • Add this line to blink the error message three times after a change to the field. [C#]

Last Updated: 10/17/2006 Peter Blum

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:&nbsp;</b>”.

ASP.NET Text for the <ErrorFormatterContainer> node within a Validator <vam:Validatorclass [properties] > <ErrorFormatterContainer> <vam:TextErrorFormatter BeforeHTML="<b>Error:&nbsp;</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.

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

Page 23 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

• • • •

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.

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

Page 24 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. 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 Label to your Web Form: • • • • • • 4. 5. Open the ToolBox and locate the Label control. Drag it onto your Web Form. Set ID to ‘FixErrorsLabel’. Set Text to ‘Fix the errors below’. Set ForeColor to White. Set BackColor to Red.

Add a linebreak after the Label: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Label. 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”.

6.

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”. Drag it onto your Web Form. 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. 7. Set these properties in the RequiredTextValidator using the Properties Editor. • • • 8. ControlIDToEvaluate to “TextBox1”. ErrorMessage to “This field is required.” SummaryErrorMessage to “The top field requires an entry.”

Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Validator. Copyright © 2004-2006 Peter L. Blum. All Rights Reserved Page 25 of 49

Professional Validation And More v3.0 Tutorials 9. Add a TextBox to your Web Form: • • • • • • • • •

Last Updated: 10/17/2006 Peter Blum

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

10. 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”. Drag it onto your Web Form. Place it to the right of TextBox2.

11. Set these properties in the RequiredTextValidator using the Properties Editor: ControlIDToEvaluate to “TextBox2”. ErrorMessage to “This field is required”. SummaryErrorMessage “The bottom field requires an entry”.

12. Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Validator. 13. 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”. Drag it onto your Web Form. Place it below the lower TextBox. Set the Text property to “Submit”.

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”. Drag it onto your Web Form. 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:

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

Page 26 of 49

Professional Validation And More v3.0 Tutorials .VAMValSummaryHeader { color: red; } •

Last Updated: 10/17/2006 Peter Blum

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.

18. The form is complete. You can test it. The ASP.NET Text for this tutorial is on the next page.

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

Page 27 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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 <link href="/VAM/Appearance/VAMStyleSheet.css" type="text/css" rel="stylesheet"> </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>

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

Page 28 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. 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 Label to your Web Form: • • • • 4. • • • 5. • • • Open the ToolBox and locate the Label control. Drag it onto your Web Form. Set ID to “FullNameLabel”. Set Text to “Full Name”.

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 ID to “TextBox1”.

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”. Drag it onto your Web Form. 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. 6. Set these properties in the RequiredTextValidator using the Properties Editor: • • 7. 8. ControlIDToEvaluate to “TextBox1”. ErrorMessage to “This field is required”.

Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<BR>’ after the Validator. 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”. Drag it onto your Web Form. Page 29 of 49

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

Professional Validation And More v3.0 Tutorials • Place it below the lower TextBox. • 9. • • • • • Set the Text property to “Submit”.

Last Updated: 10/17/2006 Peter Blum

Use the HiliteFields property to identify the FullNameLabel for a color change: Open the Properties Editor. 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 { }

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

Page 30 of 49

Professional Validation And More v3.0 Tutorials Change it to: .VAMTextHiliteFields { color: red; } • • If you are using a code behind file, compile your web application. Save the VAMStyleSheet.css file.

Last Updated: 10/17/2006 Peter Blum

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”. 11. 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 <link href="/VAM/Appearance/VAMStyleSheet.css" type="text/css" rel="stylesheet"> </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>

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

Page 31 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. 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: • • • 4. • • • 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 to “TextBox1”.

Add the DataTypeCheckValidator 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”. Drag it onto your Web Form. 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 these properties in the DataTypeCheckValidator using the Properties Editor: • • • 6. 7. ControlIDToEvaluate to “TextBox1”. ErrorMessage to “Incorrect format”. DataType to Date.

Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Validator. 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”. Drag it onto your Web Form. Place it below the lower TextBox. Set the Text property to “Submit”.

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. Page 32 of 49

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

Professional Validation And More v3.0 Tutorials [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 • 9. If you are using a code behind file, compile your web application.

Last Updated: 10/17/2006 Peter Blum

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 <link href="/VAM/Appearance/VAMStyleSheet.css" type="text/css" rel="stylesheet"> </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>

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

Page 33 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. 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 RequiredFieldDescription control to your Web Form. • • 4. 5. Open the ToolBox and locate the RequiredFieldDescription control. In VS.NET, it may be in a tab named “Professional Validation And More”. Drag it onto your Web Form.

Add a linebreak after the RequiredFieldDescription: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the RequiredFieldDescription. 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 to “TextBox1”.

6.

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”. Drag it onto your Web Form. 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. 7. Set these properties in the RequiredTextValidator using the Properties Editor: • • • 8. 9. ControlIDToEvaluate to “TextBox1”. ErrorMessage to “This field is required.” ShowRequiredFieldMarker to true.

Add a linebreak after the Validator: Either type an ENTER keystroke or in HTML view, enter ‘<br>’ after the Validator. Add a TextBox to your Web Form: Page 34 of 49

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

Professional Validation And More v3.0 Last Updated: 10/17/2006 Tutorials Peter Blum • 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 ID to “TextBox2”.

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”. Drag it onto your Web Form. Place it to the right of the TextBox.

11. Add a linebreak after the RequiredFieldMarker: Either type an ENTER keystroke or in HTML view, enter ‘<BR>’ after the RequiredFieldMarker. 12. 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”. Drag it onto your Web Form. Place it below TextBox2.

13. Set these properties in the RequiredTextValidator using the Properties Editor: ControlIDToEvaluate to “TextBox2”. ErrorMessage to “This field is required.”

14. Add a linebreak after the RequiredTextValidator: Either type an ENTER keystroke or in HTML view, enter ‘<BR>’ after the RequiredTextValidator. 15. 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”. Drag it onto your Web Form. Place it below the lower RequiredTextValidator. Set the Text property to “Submit”.

16. The form is complete. You can test it. The ASP.NET Text for this tutorial is on the next page.

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

Page 35 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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 <link href="/VAM/Appearance/VAMStyleSheet.css" type="text/css" rel="stylesheet"> </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>

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

Page 36 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. Add a CheckBox control to your Web Form. This will be monitored for clicks to execute the FieldStateController. • • • 3. • • • 4. • • • 5. Open the ToolBox and locate the CheckBox control. Drag it onto your Web Form. Set ID to “CheckBox1”.

Add a TextBox to your Web Form. This will be the control whose state will change. 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 ID to “TextBox1”.

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”. Drag it onto your Web Form. Place it anywhere you like. The location does not really matter since the control doesn’t appear on your form at runtime.

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. Select CheckStateCondition from the Condition DropDownList. Set ControlIDToEvaluate to “CheckBox1”. The Checked property defaults to true. So leave it alone. Click OK.

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

Page 37 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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.

7.

The form is complete. You can test it.

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

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

Page 38 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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>

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

Page 39 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. Add a CheckBox control to your Web Form. This will be monitored for clicks to execute the FieldStateController. • • • 3. • • • 4. • • • 5. 6. 7. Open the ToolBox and locate the CheckBox control. Drag it onto your Web Form. Set ID to “CheckBox1”.

Add a TextBox to your Web Form. This will be the control whose state will change. 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 ID to “TextBox1”.

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. Drag it onto your Web Form. Set ID to “Panel1”.

Add a TextBox to the Panel. Set ID to “TextBox2”. Add another TextBox to the Panel. Set ID to “TextBox3”. 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”. Drag it onto your Web Form. Place it anywhere you like. The location does not really matter since the control doesn’t appear on your form at runtime.

8.

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. Select CheckStateCondition from the Condition DropDownList. Set ControlIDToEvaluate to “CheckBox1”. The Checked property defaults to true. So leave it alone. 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. Page 40 of 49

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

Professional Validation And More v3.0 Tutorials • Set ControlID to “TextBox1”. • • • • • Click Add. Set ControlID to “Panel1”. Click OK.

Last Updated: 10/17/2006 Peter Blum

10. Set the ConditionFalse.Visible property in the FieldStateController using the Properties Editor: Open the ConditionFalse property to reveal its child properties. 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.

11. The form is complete. You can test it. The ASP.NET Text for this tutorial is on the next page.

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

Page 41 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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>

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

Page 42 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. Add a CheckBox control to your Web Form. This will be monitored for clicks to execute the FieldStateController. • • • 3. • • • • • 4. • • • 5. Open the ToolBox and locate the CheckBox control. Drag it onto your Web Form. Set ID to “CheckBox1”.

Add a HyperLink to your Web Form. This will be the control whose state will change. Open the ToolBox and locate the HyperLink control. Drag it onto your Web Form. Set ID to “HyperLink1”. Set NavigateUrl to “http://www.google.com”. Set Text to “Search Engine”.

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”. Drag it onto your Web Form. Place it anywhere you like. The location does not really matter since the control doesn’t appear on your form at runtime.

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. Select CheckStateCondition from the Condition DropDownList. Set ControlIDToEvaluate to “CheckBox1”. The Checked property defaults to true. So leave it alone. 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”.

7.

The form is complete. You can test it.

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

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

Page 43 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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> </vam:FieldStateController> </form> </body> </html>

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

Page 44 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. Add a CheckBox control to your Web Form. This will be monitored for clicks to execute the FieldStateController. • • • 3. • • • • • 4. • • • 5. Open the ToolBox and locate the CheckBox control. Drag it onto your Web Form. Set ID to “CheckBox1”.

Add a Label to your Web Form. This will be the control whose state will change. Open the ToolBox and locate the HyperLink control. Drag it onto your Web Form. Set ID to “Label1”. Set ForeColor to Green. Set Text to “Colorful label”

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”. Drag it onto your Web Form. Place it anywhere you like. The location does not really matter since the control doesn’t appear on your form at runtime.

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. Select CheckStateCondition from the Condition DropDownList. Set ControlIDToEvaluate to “CheckBox1”. The Checked property defaults to true. So leave it alone. Click OK.

6.

Set these properties in the FieldStateController using the Properties Editor: • • • • • • • 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”.

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

Page 45 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

7.

The form is complete. You can test it.

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

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

Page 46 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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> </vam:FieldStateController> </form> </body> </html>

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

Page 47 of 49

Professional Validation And More v3.0 Tutorials

Last Updated: 10/17/2006 Peter Blum

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. 1. 2. Add a Web Form to your web application. Add a RadioButton control to your Web Form: • • • • 3. 4. 5. Open the ToolBox and locate the CheckBox control. Drag it onto your Web Form. Set ID to “RadioButton1”. Set Text to “1”.

Add a second RadioButton control to the right of the first. Set ID to “RadioButton2”. Set Text to “2”. Add a third RadioButton control to the right. Set ID to “RadioButton3”. Set Text to “3”. Add a Label control to the right: • • • • Open the ToolBox and locate the Label control. Drag it onto your Web Form. Set ID to “Label1”. Set Text to “Shown when 1 is marked”.

6.

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”. Drag it onto your Web Form. Place it anywhere you like. The location does not really matter since the control doesn’t appear on your form at runtime.

7.

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. Select CheckStateCondition from the Condition DropDownList. Set ControlIDToEvaluate to “RadioButton1”. The Checked property defaults to true. So leave it alone. Click OK.

8.

Set these properties in the FieldStateController using the Properties Editor: • • • Set the ControlIDToChange property to “Label1”. Open the ConditionFalse property to reveal its child properties. Set the Visible property to false.

9.

Add ‘RadioButton2’ and ‘RadioButton3’ to the ExtraControlsToRunThisAction property: Page 48 of 49

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

Professional Validation And More v3.0 Last Updated: 10/17/2006 Tutorials Peter Blum • 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.

10. 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"> <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> </vam:FieldStateController> </form> </body> </html>

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

Page 49 of 49

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->