Link to home
Start Free TrialLog in
Avatar of sglee
sglee

asked on

making SELECT dropdown field mandatory

Hi,
 I have the following SELECT tag in ColdFusion CFM page and like to make it "Mandatory" so that users have to pick the value from the dropdown list.
What is the simplest way?

      <SELECT NAME="Frequency1">
                    <OPTION VALUE="0"></OPTION>
                  <CFOUTPUT query="GetFrequency">
                  <OPTION VALUE="#ID#">#Frequency#</OPTION>
                  </CFOUTPUT>
                  </SELECT>
Avatar of James Rodgers
James Rodgers
Flag of Canada image

you  could add required for HTML 5

<SELECT NAME="Frequency1" required>
<option value="">Select</option> <!--- important that value is empty!!! --->
other options

</select>

html required might not be full supported so you should include js validation for backwards compatibility and check on submission also.
Avatar of sglee
sglee

ASKER

How do I do JS validation?
jS is JavaScript just to be sure it is clear.

To include validation on the browser/client side, you would use javascript/s that will onSubmit check the form i.e. that required inputs are entered.
i.e. add the onSubmit() to the definition of the form which will then evaluate the form to make sure all your specified required fields are present.
There are several publicly available form validator scripts that you could use if you do not write your own.
Avatar of sglee

ASKER

Can someone help me with a java script to force the selection of the field "Frequency"?
ASKER CERTIFIED SOLUTION
Avatar of James Rodgers
James Rodgers
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Why not validate the form submission on the server?  Some individuals could disable javascript which means you will end up where you are now.  You should validate the data on the server and respond back to the user that a field that is required is not set marking said field so the user is made clearly aware.
Avatar of sglee

ASKER

@Jester
I like to try "straigh js". Let me try what you posted above and let you know.
Make sure to make the message clear what field is the cause for this error.  The quick message that jester included as the example has to be fine tuned by you. or the user depending on how many fields you have may become frustrated.
i.e. "A selection is required in the Frequency drop down"
Why not validate the form submission on the server?  Some individuals could disable javascript which means you will end up where you are now.  You should validate the data on the server and respond back to the user that a field that is required is not set marking said field so the user is made clearly aware.

I do both, client side js then server side validation, see my first post.
Lester, the comment was directed to the asker who seems from the request for a JS example not contemplating implementing validation on the server side.
Avatar of sglee

ASKER

I am using "Frequency" 15 times on this particular form. So onsubmit="return validateForm(this)" may not work??

I am wondering if I can use CFSelect just like I use CFInput. The following CFINPUT works perfect.

<CFINPUT TYPE="text" Required="Yes" NAME="UsageM1" SIZE=8 MAXLENGTH= 10 Message = "Usage M1 is Missing!" >

However when I use  CFSELECT, it does not work..

            <CFSELECT NAME="Frequency1" Required="Yes" Message = "Frequency1 is Missing!" Size="1" >
                    <OPTION VALUE="0"></OPTION>
                  <CFOUTPUT query="GetFrequency">
                  <OPTION VALUE="#ID#">#Frequency#</OPTION>
                  </CFOUTPUT>
            </CFSELECT>  

Why is that?
The javascript has to match to the correct form

You seem to be posting the form that is the raw side from coldfusion, the javascript when it runs in the browser, will look at the form data within the HTMl.

Via the browser, look at the source and that is where you will see the javascript code and the forms you have defined there.

Usually, you only have one field that is named Frequency1 in a form.

presumably the cfselect will be preprocessed by the server prior to returning the data to the client to build the select box with the available values along with those that are already selected......
filed names should be unique except in the case of radio arrays, when there are multiple fields with the same name the browser treats it like a list and if any field is completed it considers all fields of that name to be good.
Avatar of sglee

ASKER

I don't comprehend last two comments.

How can I make this:

            <CFSELECT NAME="Frequency1" Required="Yes" Message = "Frequency1 is Missing!" Size="1" >
                    <OPTION VALUE="0"></OPTION>
                  <CFOUTPUT query="GetFrequency">
                  <OPTION VALUE="#ID#">#Frequency#</OPTION>
                  </CFOUTPUT>
            </CFSELECT>  

work like this?

<CFINPUT TYPE="text" Required="Yes" NAME="UsageM1" SIZE=8 MAXLENGTH= 10 Message = "Usage M1 is Missing!" >

I just like to create a popup window with the error message when the user have not selected nothing from Frequency drop down.
Avatar of sglee

ASKER

@jester

I tried your code. I left Frequency not selected, but error message windows does not pop up when I clicked [Submit] button.
---------------------------------------------------------------------
function validateFrom(objform){
response= true;
errormessage="";
if(!document.getElementById('Frequency1').selectedindex)
response=false;
errormessage = "A Selection is required";
}

if(errormessage){
alert(errormessage);
}


...

<CFFORM name="form1" Method=POST ACTION="PreviewOrder.cfm" onsubmit="return validateForm(this)">
...
                    <OPTION VALUE="0"></OPTION>
                  <CFOUTPUT query="GetFrequency">
                  <OPTION VALUE="#ID#">#Frequency#</OPTION>
                  </CFOUTPUT>
                  </SELECT>

...

                  <INPUT TYPE=SUBMIT Name"Submit_Btn" VALUE="Preview My Order">
</CFFORM>