CFSELECT required="true" (Well .. not really)

I was never a big fan of the old html cfforms, and consequently never learned much about them. Though they have probably improved over time. While googling I came across the old question of why the required attribute does not work unless the list supports multiple selections. Having a few minutes to kill I decided to explore it.

The common response was along the lines of "You should not expect it to work. Something is always selected if the list size is one". Technically, that is true. But to me it comes down to the fact that the validation was implemented differently than some people might expect, given how they use select lists. The validation code in /CFIDE/scripts/cfform.js is clearly geared towards multiple selection lists, not single.

// if this form field is a select list
if(_c=="SELECT"){

  // verify at least one item was selected
  for(i=0;i<_b.length;i++){
     if(_b.options[i].selected){
        return true;
     }
  }

  return false;
}
...

Now I saw a few examples of tweaking cfform.js to produce the desired results. But they were not exactly what I had in mind. If I were to change the script, I would use "" as the default to represent no-selection. But have an optional attribute called "noSelection". So you could use other values like zero (0), etcetera when needed.

/*
 REPLACEMENT JAVASCRIPT
*/
if( _c == "SELECT" ) {
var idx = _b.selectedIndex;
var isValid = false;
var _defaultValue = "";

// use the supplied default value
if ( document.getElementById && _b.getAttribute("noSelection") ) {
   _defaultValue = _b.getAttribute("noSelection").toLowerCase();
}

if ( _b.type == "select-one" ) {
   // something other than the default value is selected
   isValid  = ( _b.options[idx].value.toLowerCase() != _defaultValue );
}
else {
   // multiple list: at least one item is selected
   isValid  = ( idx >= 0 );
}
return isValid;
}
...


<!---
 Use the default "" to represent no selection
--->
<cfform name="someForm" format="xml" skin="basic">
 <cfformgroup type="horizontal">
     <cfselect name="Company" label="Company" required="true">
         <option value="">-- select ---</option>
         <option value="1">Company A</option>
         <option value="2">Company B</option>
     </cfselect>
     <cfinput type="submit" name="submitBtn" value="Submit" >
 </cfformgroup>
</cfform>

<!---
 Use "0" to represent no selection
--->
<cfform name="someForm" format="xml" skin="basic">
 <cfformgroup type="horizontal">
 <cfselect name="Company" label="Company" required="true" noSelection="0"
             message="Do not pass go. Do not collect $200. Not until you select a Company.">
     <option value="0">-- select ---</option>
     <option value="1">Company A</option>
     <option value="2">Company B</option>
 </cfselect>

 <cfinput type="submit" name="submitBtn" value="Submit" >
 </cfformgroup>
</cfform>

Now I do not really have a need for this. But if I ever do, I now know where to look ;)