6.1 Form Validation | Essential ASP.NET with Examples in Visual Basic .NET

It is common and often critical for Web forms to validate user data entry. Forms are used to collect data from users to be stored in databases, and the types of information stored must match the types of the fields in the database used to store them. Furthermore, there are often dependencies on data entered by a user that should be validated as the data is entered, such as checking to be sure that a user entered a password identically in two separate fields. A good form should strive to make it easy to enter correct data and hard to enter bad data, through a combination of client-side scripting and server-side validation.

Figure 6-1 shows a sample Web form implementing validation. Client-side scripting is used to highlight the fields in which there are errors (the e-mail address is not formatted correctly, and the user neglected to fill in the day phone number). Finally, the form provides a summary of all the errors in a bulleted list on the side, with a request to the user to correct the errors before resubmitting the form.

Figure 6-1. Sample Form with Validation Errors

graphics/06fig01.gif

6.1.1 Client-Side Validation

Form validation can take place on the client side, on the server side, or ideally on both. Validation on the client side is useful because it reduces the number of round-trips necessary for a user to complete a form successfully and can provide immediate feedback to the user as she enters the data (such as highlighting fields that are incorrect in red).

Listing 6-1 shows one example of performing client-side validation with two fields that are validated using client-side scripting. If the user tries to submit the form without entering her name or e-mail address, red text will appear next to the invalid field, indicating that it must be filled in before submitting the form will work.

Listing 6-1 Client-Side Script Validation Example

 <!-- ClientScriptValidate.htm --> <html> <head> <script language=javascript> function checkForm() {   var ret = false;   if (document.all["cname"].value == "")     document.all["err_cname"].style.visibility = "visible";   else if (document.all["email"].value == "")     document.all["err_email"].style.visibility = "visible";   else     ret = true;   return ret; } </script> </head> <form name="SIGNUP" method="post"       onSubmit="return checkForm()"> <table cellspacing=0 cellpadding=1 border=0> <tr valign=top>   <td align=right><b>Name:</b></td>   <td><input id="cname" /></td>   <td><span id="err_cname"             style="visibility:hidden;color:red">       Please enter a name here</span></td></tr> <tr valign=top>   <td align=right><b>E-mail address:</b></td>   <td><input id="email" /></td>   <td><span id="err_email"             style="visibility:hidden;color:red">       Please enter your email here</span></td></tr> </table> <input type=submit value="sign up!" /> </form> </body> </html>

It is important to note that client-side validation should never be used as the sole source of validation for two reasons. First, it requires that the client browser support scripting, which may not always be the case. And second, client-side scripting can be easily subverted by a malicious user to submit bad data, perhaps corrupting your database. This is why client-side validation is most often used in conjunction with server-side validation.

6.1.2 Server-Side Validation

Before saving data entered by a user, the server should always validate it. Whether that means verifying that an e-mail address has an "@" sign in it or ensuring that the phone number contains only digits, it guarantees that any data you are storing will be consistent. Where you do this validation depends on your server implementation, but it is important for the server to be able to redisplay the form to the user if it does encounter errors.

6.1.3 Validation Observations

Validation is performed in an ad hoc way in most Web applications today. The goal of the ASP.NET validation controls is to provide a generic way to perform validation without compromising flexibility. To that end, it is useful to summarize some of the fundamental elements of Web validation so that we can verify that they are incorporated in the ASP.NET validation control scheme.

Many validation schemes involve placing error messages next to the offending input element. This makes it obvious to the user which field is in error. For convenience, all the problems with the data a user has entered in a form are often summarized in a list or paragraph somewhere on the page. It is important that both client-side and server-side validation be incorporated when possible. For any particular form field, we may want to perform multiple types of validation and display a different error message depending on the particular validation that failed. For example, we might want to display a message such as "Please enter an e-mail address" if the user has neglected to enter an e-mail address, but we would want a message such as "The e-mail address is not formatted correctly" if the user has given us a badly formatted e-mail address. We also want to be able to validate interdependent fields. For example, we may want to verify that a password field and a password verification field contain the same value. Finally, it is convenient to use regular expressions when performing validation.