Skip to main content
A
Anonymous
November 9, 2010
Answered

cfselect required in cf9

  • November 9, 2010
  • 5 replies
  • 6596 views

http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7afe.html

I read content of the page that I linked to above and I'm gathering that cfselect now has a working required attribute.  However I cannot get it to work using a very simple example.

I am running cf9 on my server but can't figure out how to get the following code to show the required message.

<cfform name="switch_this" method="post" action="switch.cfm">

<cfselect name="switch" required="yes" message="Please select an activity">

<option value=""></option>

<option value="Swimming"></option>

<option value="Running"></option>

<option value="Biking"></option>

</cfselect>

</cfform>

What I want to happen is that if the user does not select either Swimming, Running, or Biking, the form will not submit and the message "Please select an activity" will display.

    This topic has been closed for replies.
    Correct answer

    Ok I followed the instructions on the cfsearching site and tweeked the cfform-src javascript.  Here's what I put into the SELECT section...  

    else if (obj_type == "SELECT")
    {
    var idx = obj.selectedIndex;
    var isValid = false;
    var _defaultValue = "";
    // use the supplied default value
    if ( document.getElementById && obj.getAttribute("noSelection") ) {
    _defaultValue = obj.getAttribute("noSelection").toLowerCase();}
    if ( obj.type == "select-one" ) {
    // something other than the default value is selected
    isValid  = ( obj.options[idx].value.toLowerCase() != _defaultValue );}
    else {
    // multiple list: at least one item is selected
    isValid  = ( idx >= 0 );
    }
    return isValid;

    5 replies

    A
    Anonymous
    March 5, 2012

    http://cfsearching.blogspot.com/2008/11/cfselect-requiredtrue-well-not-really.html

    A
    Anonymous
    Correct answer
    March 6, 2012

    Ok I followed the instructions on the cfsearching site and tweeked the cfform-src javascript.  Here's what I put into the SELECT section...  

    else if (obj_type == "SELECT")
    {
    var idx = obj.selectedIndex;
    var isValid = false;
    var _defaultValue = "";
    // use the supplied default value
    if ( document.getElementById && obj.getAttribute("noSelection") ) {
    _defaultValue = obj.getAttribute("noSelection").toLowerCase();}
    if ( obj.type == "select-one" ) {
    // something other than the default value is selected
    isValid  = ( obj.options[idx].value.toLowerCase() != _defaultValue );}
    else {
    // multiple list: at least one item is selected
    isValid  = ( idx >= 0 );
    }
    return isValid;
    D
    Community Expert
    Dave WattsCommunity Expert
    Community Expert
    November 9, 2010

    The REQUIRED attribute is only useful for CFSELECT if you allow multiple selections. Otherwise, there will always be some item selected. By default, that will simply be the first item.

    To get what you really want here, you'll need to write some JavaScript:

    <script>

    function checkSelect(mySelect) {

         if (mySelect.selectedIndex == 0) {

              window.alert("You must select an option!");

              return false;

         }

    }

    </script>

    <form action="..." method="..." onsubmit="return checkSelect(this.switch)">

    <select name="switch">

    <option value=""></option>

    <option value="Swimming">Swimming</option>

    <option value="Running">Running</option>

    <option value="Biking">Biking</option>

    </select>

    <input type="submit"/>

    </form>

    Dave Watts, Eidolon LLC
    A
    Anonymous
    November 9, 2010

    That's what I was using before. All my validation is utilizing cf's built in cfform vals except for cfselect.

    Oh well... I'll just go back to the old way.

    I was hoping to get more consistent.

    D
    Community Expert
    Dave WattsCommunity Expert
    Community Expert
    November 9, 2010

    Well, the REQUIRED attribute pretty much does what it says on the tin. If you have a selected option, it's not going to do anything for you.

    Dave Watts, CTO, Fig Leaf Software

    http://www.figleaf.com/

    http://training.figleaf.com/

    Fig Leaf Software is a Veteran-Owned Small Business (VOSB) on

    GSA Schedule, and provides the highest caliber vendor-authorized

    instruction at our training centers, online, or onsite.

    Read this before you post:

    http://forums.adobe.com/thread/607238

    Dave Watts, Eidolon LLC
    ilssac
    ilssac
    Inspiring
    November 9, 2010

    I added multiple="yes" to the <cfselect...> tag.  This changes the behavior of the browser so that it does not automatically select any of the options.  Now if a user does not interact with the control, the error message will be displayed.

    <html>
    <head>
    <title>CFSelect</title>
    </head>
    <body>
    <cfform name="switch_this" method="post" action="switch.cfm">
       <cfselect name="switch" required="yes" message="Please select an activity" multiple="yes">
          <option value="test"></option>
          <option value="Swimming">Swimming</option>
          <option value="Running">Running</option>
          <option value="Biking">Biking</option>
        </cfselect>
       <input type="submit">
    </cfform>

    <cfdump var="#form#">
    </body>
    </html>

    Try with and without the multiple option and you will see the difference in behavior.

    A
    Anonymous
    November 9, 2010

    But I don't want them to be able to select multiple...

    -
    -__cfSearching__-
    Inspiring
    November 9, 2010

    If you read link you posted it says:

    "(required)

    Note: This attribute has no effect if you omit the size attribute or set it to 1, because the browser always submits the displayed item. "

    The mentioned "fix" only applies to flash forms. If you are using an html form, with a size 1 select list, you will need to write your own validation function.

    -Leigh

    ilssac
    ilssac
    Inspiring
    November 9, 2010

    I played with this a bit.  The trouble is that the broswer is automatically selecting the first (empty in your example) option if the user does nothing with the control.  That aslo means the 'required' paramter has been met and that the message will not fire.

    ilssac
    ilssac
    Inspiring
    November 9, 2010

    Is that the exact code from your CFML file?

    Is it true that none of the options have a 'selected' parameter?

    If any of them have a 'selected' parameter then the required parameter is fulfilled and the message will never be displayed.

    J
    Joshua_Cyr
    Participating Frequently
    November 9, 2010

    Also do you have a mapping for cfide? To check, view source, see that there

    is a js file listed in there at /cfide see if you can bring up that file on

    the web server.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices