Javascript Client-Side Validation Introduce scripting to your repetoire with Web page validations in JavaScript. by Chris Barlow If you want to call yourself an interactive developer, you're going to need some scripting in your repertoire. A good place to start is writing JavaScript functions to validate fields on a Web page. So make sure you have access to a Web server for testing the simple code we'll use in this column. Premier Members: Download the code for this article Registered Members: Download the code for entire issue Not a premier member? Upgrade now! The first Web browsers could only display formatted text and images from HTML. Although they could display an HTML form with fields like text boxes and check boxes, these forms were processed at the server, usually with Common Gateway Interface (CGI) programs or PERL scripts. Today's popular browsers include powerful scripting engines that allow many functions to be performed at the client side, saving the roundtrip over the network. As Dynamic HTML (DHTML) becomes more prevalent, you'll be able to develop powerful applications that run within the browser on the client. In the meantime, you can use scripting to take some of the load off the server and the network. Unless your Web pages are only accessed on an Intranet, where you can control the browser used, Java-Script is the only common scripting language you can count on. One of the most common problems facing an interactive developer is validation of form data. Are the required fields filled in? Are they filled in with the correct formats? Do the fields make sense when compared to other fields on the form? Standard HTML only allows minimal validation to limit the maximum length of a text field. For example, the simple form below has a single text field with a display length of 35 characters and a maximum length of five characters. The browser won't let you enter more than five characters in the field: Form1: MaxLength Field Validation

Enter your email address

Note that this form is good only for testing since it has no submit button or form action to return the contents of the field to the Web server. Script Validation If you want to check more than the maximum length of a field, you'll need to add some form processing. Some processing needs to take place at the server. For example, checking to see if a user is registered in the user database, probably requires access to a database on the server. However, much of the field validation can take place on the client. To validate the fields on a form when the user clicks the submit button, you'll need to use the onSubmit event to call a validation function. One of the problems I had when first working with JavaScript in HTML forms was finding an easy way to test successful form submission. Normally, the Action property of a form submits the form data to an ASP file or script file on the Web server for processing. But when you're getting started with JavaScript you won't want the trouble of developing a forms processing script. To test if the submission was successful, add a simple action for the form that uses JavaScript to pop up a message box in the form action. If you see the message box, you know the form has passed your validation tests and will be submitted to the Web server. To ensure that the e-mail field is not blank, add the code in the onSubmit event using the not equal operator (!=) and comparing the value property of the e-mail field to a null string. Finally, add a Name property for the text field and a standard Submit button:

Enter your email address

If you click the Submit button without making an entry in the e-mail field, the statement in the onSubmit event evaluates to False. The form will not be submitted, the form action will not be called, and the OK message box will not appear. If you make an entry in the e-mail field, the statement returns True when you click the submit button and you will see the message box (see Figure 1). Obviously, this simple example only works for a single field. To evaluate the fields on a form you'll need to call a function in the onSubmit event. Change your code to call a function called "Validate" and pass a pointer to the form with the this argument:
If you split the validation process into several functions you'll be able to develop generic routines to use with all your forms. The main Validate function, called in the onSubmit event, will call several generic functions for the different fields on your form, starting with the CheckEmail function. The entire form will be passed to the Validate function, but you will only pass individual fields to the generic functions. Start by identifying the script language as JavaScript, then adding the comment symbol so the browser won't try to display your JavaScript code. Then declare the Validate function with an argument of form. Remember, JavaScript is case-sensitive. When you write JavaScript code, function works but Function returns an error. Add an If...Else statement that returns False if the function CheckRequired returns False, otherwise it returns True. Note that the code is written this way, rather than return (CheckRequired(form.Email)), to allow room for additional If statements to call more validation functions for other fields: