Collecting information from fields on Web forms is a common step. How does a developer ensure the information entered is in the proper format? Suppose a form asks for someone’s weight and the user enters “None of your business." Making sure data is entered correctly is called form field validation.
.Without ensuring proper data entry on Web forms, any developer is opening the door to collecting potential garbage rather than needed information. For example, forms often need to collect the user’s name, telephone number, and mailing and email addresses through TextBox controls. However, without any form validation, the user may enter even correct data in forms that conflict with automatic use of the results or just gibberish.ASP.NET has a relatively easy way to do form field validation. To demonstrate the different types of validation, start by creating a single ASP.NET page using Microsoft Visual Web Developer. Add four Label controls and four TextBox controls for user input to demonstrate the different types of validation. Arrange these so there is one Label and one TextBox per line. Change the text value of the Label controls to read “Required Field Validator," “Compare Validator," “Range Validator," and “Regular Expression Validator." Change the ID of the four TextBox to “Field," “Compare," “Range," and “Expression" to match the labels. Refer to the image for how this should look. Note: A larger font size appears in the image just for clarity.
Types of Form Validation
- Required fields. This covers cases where some information from the form has to be present. For example, if you are selling things requiring shipping, then obviously the shipping address information fields cannot be blank—there has to be form field validation. From the Toolbox Validation section, drag the “RequiredFieldValidator" on the form next to the top TextBox. In the “ControlToValidate" property, click on the pull-down arrow and chose “Field." Change the Error Message property to read, “You must complete this field."
- Comparisons. Repeat the process from the required fields section, using the CompareValidator tool, setting the ControlToValidate property to “DataTypeCheck," the type to “Integer," and the error message to “You must enter a whole number."
- Ranges. Create the range comparison example following the same pattern, dragging over the appropriate validator control and setting comparable properties for control to validate, error messages, minimum and maximum values.
- Expressions. Complete the same process as above with appropriate values in the property settings. For example, to require a Social Security number entered properly, click on the “ValidationExpression" property, and select Social Security from the pull-down list.
Form Validation Example
If you want to insert text that always displays right next to the TextBox even if there is no error, you do this by setting the Display property to “Dynamic" rather than the default “Static." With the latter, the additional text shifts to the right leaving blank space where an error message would be.
To test this example, view the results in a browser. While the error messages in the Developer and image appear in red, when active, the area should be blank unless the user enters invalid information.