Validation Controls

For checking the user input, ASP.NET 2.0 provides some excellent controls. These ready-made controls can perform a variety of checks on the input provided by the user. If the input is not correct, it will be rejected. The validation controls validate other controls on the page. For example, we can check if the user has entered her name in a text box or not. Another example is to check if the email address entered by the user is a valid email address. Let us look at these controls-

• RequiredFieldValidator - This control checks if user has provided the required input. This control will not allow empty values in the control it is checking.
• RangeValidator - This control checks if the user input is within a specified range. Out of range values will be rejected.
• CompareValidator - This control checks if the values of two inputs are the same. For example, if we have two text boxes on our page - one for entering password and another for re-typing the password, this control can check if both the text boxes have the same input.
• RegularExpressionValidator - This control checks if the input is according to a specific format. For example, if the email address entered is a valid email address. Although creating a regular expression is a complex topic, some commonly used formats are available readymade.
• CustomValidator - This control performs validation according to the code written by the developer. It is useful for situations where we need to perform some validation that is not covered under the available validation controls.
• ValidationSummary - This control does not perform any validation. Instead, it displays all the errors found by the other validation controls.

We will now use these controls to develop our `Contact' page. Here is a rough layout of the contact page:

Your Name	(text box to enter name)
Your Email	(text box to enter email)
Comments	(text box to enter comments)
Rating	(text box to enter site rating)
	Submit Button Reset Button

We have four text boxes on the page for entering the user's name, user's email address, user's comments about our site and user's rating of our site (a value between 1 and 5). There is a submit button for sending the information and a reset button to cancel the input.

Let us begin!

1. Open the project. Click on the `Contact.aspx' tab to make it visible. If the tab is not there, open the solution explorer window, right click on the Contact.aspx page and select `Open' from the menu.

2. Once the page is visible, switch to the design view. Delete the existing text from the `Content' box. Remember that the text was used as a placeholder but now we are going to create the actual page so we do not need it.

3. Click inside the empty `Content' box. From the `Layout' menu, select `Insert Table' option. A dialog box will appear.

4. As shown in the figure, enter 7 in the `Rows' numeric up-down control and 3 in the `Columns' numeric up-down control. This means that we want a table made up of 7 rows and 3 columns.. Similarly, enter 10 in the Cellpadding numeric up-down control. This will keep the contents of the cells slightly away from the cell borders. Click `OK' to continue.

5. We now have a table inside the content box. Resize the columns to get them approximately as shown in the figure below:

6. Drag and drop four Label controls and change their `Text' property as shown below -

7. Now drag and drop four textboxes, one each in the cell next to a Label control. Change their ID properties to TextName, TextEmail, TextComments and TextRating respectively. Also, change the TextMode property of the TextComments textbox to `MultiLine'. This textbox will be used to enter user's comments.

8. Now we will use the validation controls. Look for the RequiredFieldValidator control in the Validation section of the ToolBox. Drag and drop it in the cell next to the textbox for entering the user's name.

We need to set some properties for this control. Select the control by clicking on it and open the Properties window. Look for a property named `ControlToValidate'. This property specifies the control which will be validated. We want to ensure that a name must be entered in the TextName textbox. From the drop down list next to the property, select TextName textbox control. The next property we want to change is the ErrorMessage property. Type a meaningful error message in the cell next to it. Finally, set the Text property by entering an asterisk (*) symbol in it.

9. Drag and drop another RequiredFieldValidator in the cell next to the textbox for entering Email address. Set its properties as shown below:

ControlToValidate - TextEmail

ErrorMessage - Please Enter Your Email

Text - *

This will ensure that the user enters a value in the Email textbox. But what if it is not a valid Email address? To make sure that the Email address is valid, we will use the RegularExpressionValidator control.

10. Drag the RegularExpressionValidator from the ToolBox and drop it beside the RequiredFieldValidator control for the Email textbox. Select the control and set the following properties:

ControlToValidate - TextEmail

ErrorMessage - Please Enter a Valid Email

Text - *

We will need to set one more property for this control. Look for the ValidationExpresion property and click the button in the cell next to it.

This will open up the Regular Expression Editor dialog box. Select the Internet e-mail address option from the Standard Expressions list. Click the OK button.

11. Add another RequiredFieldValidator control for the comments textbox and set its properties:

ControlToValidate - TextComments

ErrorMessage - Please Enter Some Comments

Text - *

12. Next, we want to add a validation system for the Ratings textbox so that only values from 1 to 5 are accepted. To do this, we will need the RangeValidator control.

Drag the RangeValidator control and drop it in the cell next to the Ratings text box. Set it properties as:

ControlToValidate - TextRating

ErrorMessage - Enter a value from 1-5

Text - *

MaximumValue - 5 (Because the maximum rating can be 5)

MinimumValue - 1 (Because the minimum rating can be 1)

Type - Integer (The type of value for rating is integer)

13. Finally, add a Button control and a ValidationSummary control as shown in the figure. The ValidationSummary control will display all the errors at one place.

Save the project and then run the page using Ctrl+F5. Try various invalid inputs and click the Submit button to test the error control system for our page!

This is what the page will look like if the submit button clicked without entering anything:

Invalid E-mail address:

Incorrect rating:

The validation controls make it very easy to check errors in the user input. The contact page will not be submitted until the user enters the values exactly as we want. But what happens if the values are all correct? How are we going to collect the information entered by the user? We have different options for this. We can write code that will store the values entered by the user into a database. We will learn how to do it later in this tutorial. Another approach is to write code that will mail this information to a specified e-mail address.