WebRef Update: Featured Article: Form Validation with Cold Fusion and JavaScript | 2 | WebReference

WebRef Update: Featured Article: Form Validation with Cold Fusion and JavaScript | 2


Form Validation with Cold Fusion and JavaScript

The Best of Both

Because neither Cold Fusion nor JavaScript validation is ideal, using both makes sense. When I first starting doing this, I created separate JavaScript functions for each form. This quickly became tedious, all the more so because I was duplicating the CF validation logic.

The following script eliminated these problems. It can be reused without modification whenever you want to add client-side validation to your Cold Fusion forms.

function checkForm(thisform) { returnval=true; for (var j=0; j<(thisform.elements.length); j++) { indx = thisform.elements[j].name.indexOf('_required'); if (indx != -1) { fieldname=thisform.elements[j].name.substring(0,indx); if (thisform.elements[fieldname].value.length == 0) { alert(thisform.elements[j].value); j = (thisform.elements.length); returnval = false; } } } return returnval; }

You can paste this directly into any form that requires it, but I recommend using the SRC attribute of the SCRIPT tag. That way, all forms can access a single copy of the script.

The form tag is written as follows:

<form name="myForm" ACTION="formprocessor.cfm" METHOD="POST" onSubmit="return checkForm(this)">

When the form is submitted, it invokes the function and passes a reference to itself as a parameter. The function loops through all form elements looking for field names that end with '_required.'

If it finds such a field, it uses the beginning of its name to determine the name of the field to be validated, and then checks the field's value. If the value is empty, the script displays an alert, using the error message from the hidden CF validation field. It then returns the value false to cancel the submission of the form.

Once the script finds a validation error, it stops validating further by setting the loop counter j to its maximum value.

In this article I wanted to focus on the basic technique, so I've made the script very simple. For example, it validates text box values only. However, Cold Fusion supports several different kinds of validation (e.g., float, integer, range, etc.); with modifications, the script can support them as well.

You may also want to support validation of fields other than text boxes, but here things get tricky. First, drop-down fields don't have a value attribute in Netscape 4.x, so you have to use different logic to validate them. Likewise, checkboxes and radio buttons require special handling. The problem then becomes recognizing different types of fields. The JavaScript type operator provides this information in modern browsers, but is not supported by old browsers. An alternative is to use object detection techniques to figure out field types. Consult the Webreference.com JavaScript section for an excellent article on this subject.

Another complication occurs when your form has multiple fields with the same name. The script can be modified to support them, but that is a subject for another article.

Conclusion

When it comes to programming, anything worth doing is worth doing exactly once. This script can help you get the best of Cold Fusion and JavaScript validation, without doubling your programming load or your maintenance headaches.

About the author:

Joe Copley is president of Copley Internet Systems http://www.copleyinternet.com. His firm is based in Charlotte, NC and specializes in e-commerce sites using Cold Fusion. Contact him at joe@copleyinternet.com.

Previous: The problems of validation

This article originally appeared in the September 7, 2000 edition of the WebReference Update Newsletter.

http://www.internet.com

Comments are welcome.
Written by Joe Copley and

Revised: September 8, 2000

URL: http://webreference.com/new/cfjsvalidate2.html