Using Client-side Validation

Traditionally, Web developers have faced a tough choice when adding form validation logic to their pages. You can add form validation routines to your server-side code, or you can add the validation routines to your client-side code.

The advantage of writing validation logic in client-side code is that you can provide instant feedback to your users. For example, if a user neglects to enter a value in a required form field, you can instantly display an error message without requiring a roundtrip back to the server.

People really like client-side validation. It looks great and creates a better overall user experience. The problem, however, is that it does not work with all browsers. Not all browsers support JavaScript, and different versions of browsers support different versions of JavaScript, so client-side validation is never guaranteed to work.

For this reason, in the past, many developers decided to add all their form validation logic exclusively to server-side code. Because server-side code functions correctly with any browser, this course of action was safer.

Fortunately, the Validation controls discussed in this chapter do not force you to make this difficult choice. The Validation controls automatically generate both client-side and server-side code. If a browser is capable of supporting JavaScript, client-side validation scripts are automatically sent to the browser. If a browser is incapable of supporting JavaScript, the validation routines are automatically implemented in server-side code.

You should be warned , however, that client-side validation works only with Microsoft Internet Explorer version 4.0 and higher. In particular, the client-side scripts discussed in this chapter do not work with any version of Netscape Navigator.

Configuring Client-side Validation

The Validation controls make use of a JavaScript script library that is automatically installed on your server when you install the .NET framework. This library is located in a file named WebUIValidation.js .

By default, WebUIValidation.js is installed in a directory named aspnet_client located beneath your Web server's wwwroot directory. If you change the location of your root directory, you need to copy the aspnet_client directory to the new directory; otherwise , the validation script will not work. If WebUIValidation.js can't be found, you receive the error Warning! Unable to find script library 'WebUIValidation.js' (see Figure 3.1).

Figure 3.1. Error from missing validation file.

NOTE

The exact location of the WebUIValidation.js file is determined by your machine.config file (in the <webControls clientScriptsLocation> section). To learn more about the machine.config file, see Chapter 15, "Creating ASP.NET Applications."

Microsoft includes a command-line tool with the ASP.NET Framework named aspnet_regiis that you can use to automatically install and uninstall the script library. To install the script library execute aspnet_regiis -c , to uninstall the library execute aspnet_regiis -e . The aspnet_regiis tool is located in your \WINNT\Microsoft.NET\Framework\[version]\ directory.

Enabling and Disabling Client-side Validation

If you request a page that contains a validation control, and you are using Microsoft Internet Explorer version 4.0 or higher, JavaScript code is automatically sent to your browser.

If, for whatever reason, you want to disable client-side form validation, you can do so by adding the following directive at the top of your page:

 <%@ Page ClientTarget="downlevel" %> 

This directive disables client-side form validation. Unfortunately, however, it also prevents all the ASP.NET controls on the page from rendering any non-HTML 3.2 compatible content. For example, the directive also prevents the rendering of Cascading Style Sheet attributes to the page.

NOTE

The ClientTarget attribute accepts a string value that corresponds to one of the entries in the <clientTarget> section of the machine.config file. In the machine.config file, uplevel is defined as Internet Explorer 4.0 and downlevel is defined as the Unknown browser. The Unknown browser is assumed to not support Cascading Style Sheets.

Alternatively, you can disable client-side validation for individual validation controls by setting the EnableClientScript property to the value False . Because all validation controls share the EnableClientScript property, you can use this property to disable client-side scripts for particular validation controls or for all validation controls.

Finally, you can disable validation, both client and server validation, when certain buttons are pushed . You'll need to do this when creating a Cancel button. See the last section of this chapter, "Disabling Validation," for sample code that demonstrates how to do this.