Solved

making SELECT dropdown field mandatory

Posted on 2014-12-29
16
138 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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Today, I was working on some optimization and spam-stopping techniques when I encountered Ben Nadel's post to reduce spam feature using Math (http://www.bennadel.com/blog/197-How-I-Stop-Spammers-On-My-ColdFusion-Blog.htm). While this method is not o…
This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Suggested Courses

732 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