Solved

making SELECT dropdown field mandatory

Posted on 2014-12-29
16
142 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 78

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
Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

 

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 500 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 78

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 78

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 78

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 78

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Hi, I will be creating today a basic tutorial on how we can create a Mail Custom Function and use it where ever we want. The main advantage about creating a custom function is that we can accommodate a range of arguments to pass to the Function and …
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 …
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…

696 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