How to use ASP.NET validation controls from Visual Basic .NET or from Visual Basic 2005 (316662)

SUMMARY

The .NET Framework contains a variety of validation controls that, when placed on an ASP.NET Web Forms page, validate user input entered into the control fields and display associated error messages for each control. This article explains how you can use ASP.NET validation controls to quickly and easily implement client-side and server-side validation of user input.

back to the top

Requirements

The following list outlines the recommended hardware, software, network infrastructure, and service packs that are required:

• Visual Studio .NET or Visual Studio 2005
• Microsoft Internet Information Server (IIS) 5.0 or later

This article assumes that you are familiar with the following topics:

• Web applications
• ASP.NET

back to the top

Use ASP.NET Validation Controls from Visual Studio .NET

Validation of user input can be a cumbersome task. The .NET Framework provides validation controls that validate user input and display appropriate error messages whenever invalid data is encountered in a validation control. This becomes a big time saver when you need to duplicate this validation on both the client and server. Additionally, a ValidationSummary control is provided to display all error messages for a page in one area of the screen.

The following steps create an ASP.NET Web application that prompts the user for a user name, e-mail address, and password. When the user submits the requested information, validation controls on the form validate the data entered by the user and display any error messages in a summarized list at the bottom of the screen.

1. Start Visual Studio .NET or Visual Studio 2005.
2. Create a new ASP.NET Web application project in Visual Basic .NET or in Visual Basic 2005.
3. Switch to the HTML view of the WebForm1.aspx window.
4. Add input controls and associated messages (prompts) to your form to solicit input from the user. In the WebForm1 HTML window, copy and paste the following code between the opening and closing form tags.
   
   NOTE: When you paste code into the HTML window, it is important to paste the code segments as HTML. To do this, select Paste as HTML on the shortcut menu.

   <table>
   <tr width=100>
   <td>UserName:</td>
   <td><input id=txtUserName type=text size=20 maxlength=15 runat=server/>*
   </td>
   </tr>
   
   <tr width=100>
   <td>E-mail Address:
   <td><input id=txtEmail type=text size=35 maxlength=30 runat=server/>  (someone@microsoft.com)
   </td>
   </tr>
   
   <tr width=100>
   <td>Password:</td>
   <td><input id=txtPassword type=password size=15 maxlength=10 runat=server/>*
   </td>
   </tr>
   
   <tr width=100>
   <td>Retype Password:</td>
   <td><input id=txtConfirmPassword type=password size=15 maxlength=10 runat=server/>*
   </td>
   </tr>
   </table>
   					

5. RequiredFieldValidator controls verify that some value has been entered for the field that the control specifies. Add RequiredFieldValidator controls to your form for the UserName and Password fields.
   
   In the WebForm1 HTML window, copy and paste the following code after the </table> tag:

   <asp:RequiredFieldValidator id=valUserNameRequired 
   ControlToValidate=txtUserName ErrorMessage="UserName is a required field." EnableClientScript=true Display=None Runat=server/>
   		<asp:RequiredFieldValidator id=valPasswordRequired 
   ControlToValidate=txtPassword ErrorMessage="Password is a required field." EnableClientScript=true Display=None Runat=server/>
   		<asp:RequiredFieldValidator id=valConfirmPasswordRequired 
   ControlToValidate=txtConfirmPassword ErrorMessage="Password confirmation is a required field."
   EnableClientScript=true Display=None Runat=server/>
   					

6. Password fields are generally verified by forcing the user to type the same password twice. The CompareValidator control compares the contents of two input fields and generates an error message if they do not match. Use a CompareValidator control to validate the password fields.
   
   In the WebForm1 HTML window, copy and paste the following code after the validation controls added in step 5:

   <asp:CompareValidator id=valComparePassword 
   ControlToValidate=txtConfirmPassword ErrorMessage="Password fields must match." ControlToCompare=txtPassword Display=None
   EnableClientScript=true Runat=server/>
   					

7. There are fields that sometimes require more customized validation, such as an e-mail address field. The RegularExpressionValidator control ensures that the basic format of someone@microsoft.com is followed. The contents of the field are tested against a regular expression, and if no match to the expression is made, the user receives an error message. Add a RegularExpressionValidator control to validate the format of the e-mail address provided by the user.
   
   In the WebForm1 HTML window, copy and paste the following code after the preceding validation controls:

   <asp:RegularExpressionValidator ID=valEmailAddress
   ControlToValidate=txtEmail	ValidationExpression=".*@.*\..*" ErrorMessage="Email address is invalid." 
   Display=None EnableClientScript=true Runat=server/>
   					

8. Add a Submit button to allow the user to submit the page to the server and validate the content of the controls on the form.
   
   In the WebForm1 HTML window, copy and paste the following code after the preceding validation controls:

   <br>
   <input type=submit id=cmdSumbit value=submit runat=server/>
   					

9. Finally, a ValidationSummary control is used to display all encountered errors in a single area of the form.
   
   In the WebForm1 HTML window, copy and paste the following code after the code for the Submit button:

   <br><br>
   <asp:ValidationSummary id=ValSummary HeaderText="The following 
   errors were found:" ShowSummary=True DisplayMode=List Runat=server/>
   					

10. Click Save.
11. On the Debug menu, click Start to build and run the application.
    
    Form1 is displayed on the screen.

back to the top

Verification

• If the user clicks Submit without entering any input values, the three required-field error messages should be displayed.
• If the user submits two password values that do not match, the "Password fields must match" error message should be displayed.
• If the user submits an e-mail address that does not conform to the proper format, the "E-mail address is invalid" error message should be displayed.

back to the top