Anyone who's needed JavaScript validation for his or her forms knows how easy it is to use ColdFusion's CFFORM tag. It's a quick and easy way to ensure that the form is filled out properly. However, CFFORM can be as limited as it is useful (see Figure 1).
Several types of validation that aren't available are:
- Making a single-select box required
- Making checkboxes and radio buttons required
- Limiting the number of checkboxes or multiselect options selected
- Restricting dates entered to a certain range.
Many developers scrap CFFORM altogether and just use the HTML FORM tag in conjunction with their own JavaScript validation. Rarely do you hear about multiple customized validation scripts being used with the CFFORM tag.
It's possible to use both - good news for anyone who already uses CFFORM and wants to add on to it or for those who're tired of writing JavaScript to ensure basic validation.
Modular Validation Scripts
The CFFORM JavaScript validation is modular. There's a function for each type of validation. These functions are called by the main function for each form field that uses them. The validation to make sure a text box is filled will be called five times if you have 5 CFINPUT TYPE = "text" fields with REQUIRED set to yes. Our customized validation will be set up the same way.
First you need to create your SCRIPT tag. Place your <SCRIPT> tag inside the <HEAD> tags. ColdFusion positions the CFFORM JavaScript just above the </HEAD> tag. If your JavaScript isn't inside the <HEAD>, it'll be below the CFFORM JavaScript. It'll still work, but it's harder to debug your JavaScript when it's at line number 400 in your source code. It's much easier to have it at the top of your source. Your customized validation will be run after the CFFORM validation completes successfully.
<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function ExtendJS(FormName) {
...
}
</SCRIPT>
</HEAD>
Your JavaScript will contain several functions. The one that processes when the form is submitted is the one that ultimately decides whether the form should indeed be submitted or if the action should be halted and an alert box returned to the user. This function will call your validation functions. You'll have one validation function for each type of validation you wish to perform. We're using ExtendJS() as the main function. Inside the parentheses after the function is the variable FormName. To make the code modular we're also passing in the form's name to the function; it will be represented in the functions as the FormName variable.
Calling Your Scripts
For this function to be processed when the form is submitted, you must add an onSubmit method to the CFFORM tag:
<CFFORM NAME = "Extend" ACTION =
"Action.cfm" onSubmit = "return
ExtendJS('Extend')">
In your function call you need to include the name of your FORM. This is the value of the NAME attribute of the CFFORM tag. In the example above the name of the form is Extend.
Now we can start adding validation functions and then calling them from our main function.
Two of the most common validations CFFORM lacks are making a single-select box required (really required, not just passing the first value) and making a text area field required.
Required Select Boxes
Unless an option is set to be selected when the page loads, the first item in a single-select box is selected by default. You must have a value selected in a single-select box. When using a CFSELECT populated by a query, the first value from the query will be selected automatically. If the user doesn't make any changes, that first value will be passed to the action page. There's no way to make sure the user actually chooses an item. To really make a single-select box required you must use the HTML SELECT tag and then have the options generated inside a CFOUTPUT tag. Before that CFOUTPUT tag, however, include an empty option tag. This empty option is what will be selected by default:
<SELECT NAME = "SelectBox">
<OPTION VALUE = "">Select One
<CFOUTPUT QUERY = "MyQuery">
<OPTION VALUE =
"#Field#">#Field#
</CFOUTPUT>
</SELECT>
You then need a function to ensure that a value is actually selected by the user. The first option in a select box has an index of 0. If that option is the one selected, you know the user hasn't really selected an option. In that case the function will return a value of false. If any other option is selected, the function will return a value of true. This function can be placed inside the same SCRIPT tag as your main function (ExtendJS), but it must be underneath or below it, not inside it.
function
SingleSelectRequired(Form, Field) {
var itemSelected =
eval("document." + Form + "."
+ Field + ".selectedIndex");
if (itemSelected == 0) {
return false;
} else {
return true;
}
}
To use this validation for your select boxes you'll need to call the validation function from the ExtendJS function:
function ExtendJS(FormName) {
if (!SingleSelectRequired(FormName,
'SelectBox')) {
alert("You must select an
item from the drop-down
list.");
return false;
}
...
}
In the script above you're calling the SingleSelectRequired function and passing it the name of the form and the select box. To use the SingleSelectRequired function for multiple select boxes, call the function for each one and pass it the appropriate field name. If the function returns false, the alert message will display for the user and the form won't submit. If the function returns true, the script will continue running. If all validations pass, the form will be submitted.
Required Textarea Fields
One of the most commonly used form fields, TEXTAREA, doesn't even have a CF equivalent. This makes validating a TEXTAREA very difficult. To include a TEXTAREA in your validation, first add the field to your form:
<TEXTAREA NAME = "Comments" COLS
= "30" ROWS = "4" WRAP =
"virtual"></TEXTAREA>
Now add a validation function:
function TextAreaRequired(Form,
Field) {
var length = eval("document." +
Form + "." + Field +
".value.length");
if (length == 0) {
return false;
} else {
return true;
}
}
This validation function is slightly different than the one for a text box. Instead of just checking to see if the form field has a value, see if the form field's value has a length. If the length is 0, you know nothing was entered into the TEXTAREA. To call this function, add another call to your ExtendJS function:
if (!TextAreaRequired(FormName,
'Comments')) {
alert("You must enter some
comments.");
return false;
}
Additional Tips
The two examples above show how to validate HTML FORM fields inside a CFFORM. You can also write your own functions to perform additional validation on your CFFORM tags. Listing 1 provides examples of performing custom validation on CFINPUT fields of type text, radio and checkbox. These validation scripts can be used for both CFML and HTML form fields. In your JavaScript simply pass the name of the form field as you would for HTML fields.
Subscribe to ColdFusion Developer's Journal Email News Alerts
Subscribe via RSS
