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>
LVL 1
sgleeAsked:
Who is Participating?
 
James RodgersWeb Applications DeveloperCommented:
do you want jquery or straigh js?

js--quick and dirty

add this as an attribute in the form tag

onsubmit="return validateForm(this)"

function validateFrom(objform){
response= true;
errormessage="";
if(!document.getElementById('Frequency1').selectedindex)
response=false;
errormessage = "A Selection is required";
}


if(errormessage){
alert(errormessage);
}

return response;
}

Open in new window

0
 
James RodgersWeb Applications DeveloperCommented:
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.
0
 
sgleeAuthor Commented:
How do I do JS validation?
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
arnoldCommented:
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.
0
 
sgleeAuthor Commented:
Can someone help me with a java script to force the selection of the field "Frequency"?
0
 
James RodgersWeb Applications DeveloperCommented:
for jquery check this
http://jqueryvalidation.org/
0
 
arnoldCommented:
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.
0
 
sgleeAuthor Commented:
@Jester
I like to try "straigh js". Let me try what you posted above and let you know.
0
 
arnoldCommented:
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"
0
 
James RodgersWeb Applications DeveloperCommented:
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.
0
 
arnoldCommented:
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.
0
 
sgleeAuthor Commented:
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?
0
 
arnoldCommented:
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......
0
 
James RodgersWeb Applications DeveloperCommented:
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.
0
 
sgleeAuthor Commented:
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.
0
 
sgleeAuthor Commented:
@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>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.