In this tutorial, we will cover the basics of ASP.NET validation techniques. This involves using RequiredFieldValidator and RangeValidator to check the user’s input before the form is submitted.

Form validation is important for the recipient to collect the correct information and for the user to send the correct information. Some forms contain several required and optional fields which make it easy to miss a required one. You may want a field to be required because without it the rest of the information is pointless such as a name, email address, or phone number.

First you can start a new Web Application in Visual Studio 2008. We are going to create a basic form. This form is going to contain a TextBox, DropDownList, and Button control. You can add all of these controls through the Toolbox. Below is an example of them.

The TextBox control will be for the user’s name. The DropDownList control will allow the user to choose which state they live in. The Button control will allow the user to submit their information.

For tutorial purposes, we will say that the name TextBox control needs to be a required field. To make this a required field we will need to add the RequiredFieldValidator from the Toolbox. The validator will use Javascript to check if the field is empty or not. The ControlToValidate attribute needs to be set to the ID value of the TextBox. You may also use the ErrorMessage attribute to customize the error message the user receives for leaving the required field empty. This control should be placed where you’d like the error message to appear.

Now let’s say the DropDownList control also needs to be a required field. Unfortunately because it is a DropDownList, an option is always selected. For this example, we will use a RangeValidator to substitute our required needs. We will set the ControlToValidate attribute to the ID value of the DropDownList and set the MinimumValue attribute to 0. With the RangeValidator you are required to have both a minimum and maximum value, so we will set the MaximumValue to 99. Now the Choose a State option with its -1 value will be invalid because the DropDownList must have a value of at least 0.

If your values are alphanumeric instead of numerical like in our example, you can use the CustomValidator. With the CustomValidator control you can set an attribute to display an error if a certain value is selected. In our example that value would be set to -1.

Due to the fact that the Validator controls use Javascript, the page will instantly display an error when a form control isn’t valid. The user will not be allowed to submit the form until all fields are valid.

Although the default way of displaying the error message is logical, you may want to group the error messages together in a more organized format at the top or bottom of the form. To implement this you will need to add a ValidationSummary control to where you’d like the organized list of errors to be placed.

Now the errors will be listed in the ValidationSummary control and in each validation control. If you only want the error message to appear in the ValidationSummary control you will need to set the Display attribute to none in each validator control. There is also a Text attribute for each control which will allow you to display a different error in the validation control than what you are displaying in the ValidationSummary control. If the Text attribute is empty it will use the ErrorMessage value in its place.

Download Source Files