For years, I have seen ColdFusion developers complain (myself included) about the validation functionality of the <CFSELECT> tag. The basic issue goes like this; supposed you have a select menu with the following options:

<cfselect name="employeeid" required="Yes" message="Please select an employee">
     <option value = "" selected>Please Select an Employee...</option>
     <option value = "1">Bob Burns</option>
     <option value = "2">Sally Jones</option>
     <option value = "3">John Smith</option>
</cfselect>

In this scenario, you have a select list with choices, where your first choice is basically an instruction.  You have set the component to be required, so if the user submits your form and hasn’t chosen a select option, then you expect to see a JavaScript alert with the message value you supplied.  However, none of this happens when the form is submitted.

In general, ColdFusion has built in JavaScript that it dynamically generates for any <CFFORM> that has fields with validations. You set the validations you want to occur, like “required=’yes’” or “validate=’integer’”, and the appropriate JS is generated at run-time to check your fields.  So if you asked for your <CFSELECT> field to be validated, then why isn’t it being checked? Is this a bug?

The short answer is NO, this is not a bug. Your field is being checked and it is passing the check because an option is selected.  It’s the initial “instruction” option.  I’ve asked about this several times, both in Adobe forums, and in person at conferences.  The answer is always the same.  From Adobe’s point of view, this is the intended functionality of the <CFSELECT> component.  They will contend that there could be situations when this is how you expect your component to be checked.  So it is not a bug and thus will more than likely no be changed. What most developers want, is to validate that the selected “value” is not empty, which is technically custom functionality.  Now, it would be nice to have an optional attribute of “validate=’value’” on the <CFSELECT> tag that would fire if the value is empty/blank/null.  So perhaps a feature request is in order!

So what do you do if Adobe says there isn’t anything to fix, but you need to validate your <CFSELECT> component for a value? What most developers do is customize the Javascript template file that ColdFusion uses to generate its code.  This file is located at:  [YOUR WEB ROOT]/CFIDE/scripts/cfform.js

In CF7, down around line #73, you needed to change:

else if (obj_type == "SELECT")
{
for (i=0; i < obj.length; i++)
{
if (obj.options[i].selected)
return true;
}
return false;
}

to

else if (obj_type == "SELECT")
{
for (i=0; i < obj.length; i++)
{
if (obj.options[i].selected && obj.options[i].value != "")
return true;
}
return false;
}

If you’re using CF8, the fix is almost identical:

return true;
}else{
if(_c=="SELECT"){
for(i=0;i<_b.length;i++){
if(_b.options[i].selected){
return true;
}

changes to:

return true;
}else{
if(_c=="SELECT"){
for(i=0;i<_b.length;i++){
if (_b.options[i].selected && _b.options[i].value != '') {
return true;
}

Here is the same fix for CF9, provided by Rob at Rob’s Ramblings:

if(_c=="SELECT"){
for(i=0;i<_b.length;i++){
if(_b.options[i].selected){
return true;
}

to:

if(_c=="SELECT"){
for(i=0;i<_b.length;i++){
if(_b.options[i].selected && _b.options[i].value !=''){
return true;
}

Basically, you’re just telling your validation code to throw an error if the select doesn’t have a selected value AND if that value is blank.  Note, you will more than likely need to restart your ColdFusion service to make sure these changes are recognized.

Also, another related issue that trips up some people is the cfform.js file not loading.  If you have anything other than a simple single site vanilla installation (most people do), you will often see an error that the cfform.js file can’t be found, so none of your validations work.  To remedy that, simply add the path to the file to your <CFFORM>‘s scriptsrc attribute like this:

<cfform name="myForm" scriptsrc="CFIDE/scripts/cfform.js">
.....
</cfform>

Your CF install should have set up a mapping to your /CFIDE directory, so this should work.  If you don’t have that mapping, you’ll also need to add that in the CF Administrator.

What happens if you are on a shared hosted server and don’t have access to the cfform.js file and can’t restart your CF instance? In that case, you need to put a copy of the scripts directory somewhere in your site (you can get it from a demo/dev CF install), and then use the path to that version in your <CFFORM>‘s scriptsrc attribute.

« »