Working with the Validation Web Controls

There will be times when you will want to check the value of control on a Web Form without triggering a postback to the Web server. To accomplish this task, you need to execute some code on the client-side within the browser window. Prior to ASP.NET, your Web development team would have needed a developer skilled in JavaScript coding to create this code, but currently, with the help of a powerful set of validation Web controls, you can create this client-side code with a few simple mouse clicks.

The following exercise shows you how to use three of the available validation controls. Setting up these controls is as simple as placing a control on your Web Form and editing a few of its properties. When you observe these controls in action within the browser, you will see that these controls generate JavaScript code to perform their magic on the client-side:

1. Create an ASP.NET Web Application using Visual Basic, and name it WebValidation.

2. From the Web Forms panel of the Toolbox window, select the TextBox control and drag it over to the upper-left corner of your Web Form. Add two more TextBox controls directly below it for a total of three TextBox controls.

3. Drag a RegularExpressionValidator control over to the center of the Web Form. Set its

ControlToValidate property to TextBox1. Next, edit its ValidationExpression property, and select the U.S. Social Security Number from the list of possible expressions. Set the ErrorMessage property to "TextBoxl must be a valid Social Security Number". Drag this control up, and place it to the right of TextBox1.

4. Drag a RangeValidator control over to the center of your Web Form. Set the

RangeValidator control's ControlToValidate property to TextBox2. Next, set its Type property to Integer, set the MaximumValue property to 10, and set the

MinimumValue property to 1. Finally, set the ErrorMessage property to "Must be a number between 1 and 10". Drag this control over to the right of TextBox2.

5. Drag a CompareValidator over to the center of your Web Form. Set its

ControlToValidate property to TextBox3 and its ControlToCompare property to TextBox2. Set the Type property to Integer. Verify that the Operator property is set to Equal, its default value. Finally, set the ErrorMessage property to "2 and 3 are NOT equal". When you are done setting this control, drag it over to the right of TextBox3.

6. Select File|Save All to save your project, and then press F5 to run your Web Form.

When the Web Form finishes loading, you will see three TextBox controls on it, but you will not see any of your validation controls.

7. In TextBoxl, type in your name, and then press the Tab key. The

RegularExpressionValidator error message turns on, letting you know that you did not enter a valid Social Security Number.

8. Enter the value 99 in TextBox2 and press the Tab key. The RangeValidator error message lights up telling you that you did not enter a number between 1 and 10.

9. In TextBox3, enter the number 6 and press the Tab key. The CompareValidator's error message lets you know that the values of TextBox2 and TextBox3 are not equal.

10. Tab back to TextBoxl and enter a valid Social Security Number (###-##-####). Tab to the next field and the error message disappears.

11. In TextBox2, enter the number 6 and press the Tab key. The remaining two error messages disappear.

If you look at the raw HTML behind the Web page displayed in the browser, you will see all of the JavaScript code that was generated for you by these validation controls. Not only do these controls save you time by creating source code for you, they also greatly reduce the need to post a Web Form back to the server to validate and check these control values. The more you minimize the back and forth communications between the Web browser and the server, the better your application will perform, and the happier your users will be.

0 0

Post a comment