?
Solved

making SELECT dropdown field mandatory

Posted on 2014-12-29
16
Medium Priority
?
151 Views
Last Modified: 2014-12-29
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>
0
Comment
Question by:sglee
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 5
16 Comments
 
LVL 25

Expert Comment

by:James Rodgers
ID: 40522067
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
 

Author Comment

by:sglee
ID: 40522073
How do I do JS validation?
0
 
LVL 79

Expert Comment

by:arnold
ID: 40522284
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
Stressed Out?

Watch some penguins on the livecam!

 

Author Comment

by:sglee
ID: 40522423
Can someone help me with a java script to force the selection of the field "Frequency"?
0
 
LVL 25

Accepted Solution

by:
James Rodgers earned 2000 total points
ID: 40522433
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
 
LVL 25

Expert Comment

by:James Rodgers
ID: 40522434
for jquery check this
http://jqueryvalidation.org/
0
 
LVL 79

Expert Comment

by:arnold
ID: 40522436
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
 

Author Comment

by:sglee
ID: 40522454
@Jester
I like to try "straigh js". Let me try what you posted above and let you know.
0
 
LVL 79

Expert Comment

by:arnold
ID: 40522501
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
 
LVL 25

Expert Comment

by:James Rodgers
ID: 40522521
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
 
LVL 79

Expert Comment

by:arnold
ID: 40522594
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
 

Author Comment

by:sglee
ID: 40522640
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
 
LVL 79

Expert Comment

by:arnold
ID: 40522656
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
 
LVL 25

Expert Comment

by:James Rodgers
ID: 40522734
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
 

Author Comment

by:sglee
ID: 40522889
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
 

Author Comment

by:sglee
ID: 40522974
@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

Featured Post

Application Discovery Service in AWS

In the era of the cloud, customers migrating away from their existing on-premise infrastructure. This requires lots of planning, strategies, and effort to identify their existing resources and determine how best to migrate.  Datacenter migrations happen in four phases -

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
I spent nearly three days trying to figure out how incorporate OAuth in Coldfusion for the Eventful API. Hopefully, this article will allow Coldfusion Programmers to buzz through the API when they need to. Basically, what this script does is authori…
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
Suggested Courses
Course of the Month12 days, 8 hours left to enroll

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question