Error Checking and Data Validation

One way to keep your data tables clean and keep your system from bombing at the same time involves checking for errors in the data that are submitted to your site. If you verify that the data the user is entering falls within the parameters you expect, you shouldn't receive any nasty surprises that can crash your data or code. Suppose a user enters text in a numeric field-can your system handle that eventuality? Because, like it or not, the public will invariably enter the wrong type of information. And there's always the bored child at home who encounters your site and is just interested in seeing if they can crash it. Applying a bit of error checking isn't that difficult, and Dreamweaver MX can aid you in this respect.

You can verify that data entered in a web form meets expectations in two ways. You can use client- side validation or server-side validation. Advantages and limits are associated with both types, so you should use both in conjunction with each other to keep your data clean.

Client-Side Validation

Client-side validation refers to validation performed on the client side. That is, it's performed on the client's, also known as the user's, computer. Client-side validation is traditionally performed using JavaScript since the most popular browsers handle JavaScript equally well. This type of validation checks the information a user enters into a web form before it gets to the server. When the user clicks the Submit button, JavaScript ensures that the data conforms to your specifications before moving on to the action page. This kind of processing helps by doing the following:

• Reducing the amount of traffic to and from your web server since the data doesn't have to travel to the server before it gets checked (server-side validation). If an error is found in the data in server-side validation, the error must travel back to the user, who then corrects the problem and resubmits the data. This back-and-forth traveling can eat up precious bandwidth.

• Saving processing time on the server by ensuring that data is clean and clear before it gets to your database.

• Giving immediate feedback to your users since the processing is performed in their browser. The user doesn't have to wait for the data to travel to the server to be checked and a response to be sent. They know immediately whether they need to tweak the information they've entered.

Tip 

Tip Let's digress a moment here. JavaScript is not the same as Java. Java is a complete development language developed by Sun Microsystems. JavaScript originated with Netscape in 1995 as a means of helping developers and nondevelopers hook into Java. Microsoft then ported and released their version, called Jscript, in Internet Explorer. Don't make the common newbie mistake of referring to JavaScript as Java. Seasoned developers will laugh at you if you do.

Dreamweaver MX will help you with client-side data validation by letting you set behaviors to control what types of data each field in your form should receive. To set a Validate Form behavior, follow these steps:

1. . Open the page that contains the form you want to validate.

2. From the Design panel, click the Behaviors tab, which you can see in Figure 3.4.

   
   Figure 3.4: Dreamweaver MX behaviors save you time and effort by automatically creating useful scripts for you.

3. Click the + sign to add a new behavior, and choose Validate Form to open the Validate Form dialog box, a sample of which you can see in Figure 3.5.

   
   Figure 3.5: You can validate a field as a number, as a numeric range, or as an e-mail address.

Our form contains several fields, including an e-mail address field. When you select text "email" in form "form1" (NisEmail) from the Named Fields list, Dreamweaver MX generates JavaScript (or VBScript, depending on the type of page you're creating) that verifies that the user has entered a valid e-mail address. A sample of this auto-generated code follows.

function MM_validateForm() { //v4.0   var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;   for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);    if (val) { nm=val.name; if ((val=val.value)!="") {     if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');      if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail       address.\n';     } else if (test!='R') { num = parseFloat(val);     if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';     if (test.indexOf('inRange') != -1) { p=test.indexOf(':');      min=test.substring(8,p); max=test.substring(p+1);      if (num<min || max<num) errors+='- '+nm+' must contain a number       between '+min+' and '+max+'.\n';   } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }  } if (errors) alert('The following error(s) occurred:\n'+errors);  document.MM_returnValue = (errors == '');  }

You can see that Dreamweaver MX makes the validation code concise. The code parses through the e-mail address making sure that it follows an e-mail address format-alphanumeric data, an @symbol, more alphanumeric data, a period, and then more alphanumeric data. The code also contains a couple of other tests (for floating numbers and whether a field is required), since this function validates the entire form. But you might be wondering what Dreamweaver MX adds to the Submit button in order to accomplish this validation. Here it is, a function call automatically added to the Submit button's onClick event:

<input name="Submit" type="submit"  onClick="MM_validateForm('email','','NisEmail');return  document.MM_returnValue" value="Submit ">

Unfortunately, as you can see, Dreamweaver MX doesn't validate dates or other datatypes. However, recognizing that Dreamweaver MX wouldn't meet everyone's needs in every capacity, Macro- media made it extensible. You'll find numerous new and replacement behaviors on the Macromedia Exchange website at http://dynamic.macromedia.com/bin/MM/exchange/dreamweaver/main.jsp.

Some development languages, such as ColdFusion, also include their own auto-generated validation code routines. This means you could end up with lots of basically redundant JavaScript in your web pages, so you'll want to familiarize yourself with those options in your development language of choice and use the version that makes the most sense for you.

Keep in mind that since client-side validation uses JavaScript (most of the time), your validation routines will not work if the user has JavaScript turned off in their browser. Granted, most people don't turn off JavaScript, but as we mentioned before, you don't want to crash your system by letting bad data into it. That's where server-side validation comes in.

Server-Side Validation

Server-side validation consists of validating user input on the server. The user submits the form, the data travels to the server, and then the server checks the data based on the code you created- generally using IF-THEN statements or other control structures. Server-side validation is probably the most common type of validation, but again, it should be used in conjunction with client-side validation.

Even though you include client-side validation in your forms, server-side validation provides that extra, no-way-around-it step that ensures your data is clean and formatted as you expect. If the user has JavaScript turned off, the server-side validation you create will catch any errors.

Now you may be wondering why you need to use both server-side and client-side validation. Remember, client-side gives almost immediate feedback to the user without tying up your pipeline and your server. It provides a faster web-based experience for your users, which in today's rush-everywhere society is always a plus. And the user just can't escape the server-side checking, which won't tax your server too much if it is fed clean data, since you don't have to send error responses back to the user.

Server-side validation should consist of code in your action page that mirrors the validation action of each item you validate in your client-side portion-and even perhaps a bit more, depending on your system. If you validate a date and an e-mail address in your form, also validate the same date and e-mail address in your server-side validation to ensure that no data validation is skipped.