?
Solved

Checkbox validation - one of each set required

Posted on 2007-07-31
16
Medium Priority
?
356 Views
Last Modified: 2008-05-26
On this page, http://treasuretrailkanab.com/reservations.cfm 
the client has asked me to add the two sets of checkboxes for smoking y/n and pets y/n

I need an onSubmit validation script
that requires ONE of each set to be checked, not both checked, and not both blank,
so that both smoking and pets have exactly one of the boxes checked for each before the form can be be posted.

I have given the two checkbox fields in each set the same name but different IDs for yes and no. The ID should allow checking for one, both or none.

NOTE: I need to use a new custom onSubmit function, in addition to the current code you see in the page - but I need a separate standalone function, not just modifying the current js, as what is there now is gnerated by coldfusions 'cfform' function and cannot be modified easily.
0
Comment
Question by:MichaelEvangelista
  • 6
  • 5
  • 5
16 Comments
 
LVL 6

Expert Comment

by:Dirar Abu Kteish
ID: 19606608
first, use radio buttons instead of check boxes.

<input type="radio" name="smoking" value="Yes"/>Yes&nbsp;<input type="radio" name="smoking" value="female">No

Than same for pet y/n
<input type="radio" name="pet" value="Yes"/>Yes&nbsp;<input type="radio" name="pet" value="female">No

then add this function to validate

function validateRadio(form) {
// Checking if at least one period button is selected. Or not.
if (!document.forms[0].smoking[0].checked && !document.forms[0].smoking[1].checked){
alert("Please Choose Smoking Y/N");
return false;}
//the same for pet
if (!document.forms[0].pet[0].checked && !document.forms[0].pet[1].checked){
alert("Please Choose Pet Y/N");
return false;}
return true;
}

call then function from the _CF_checkCFForm_1 like this:

if(!validateRadio()){return false;}

-dirar
0
 

Author Comment

by:MichaelEvangelista
ID: 19606782
Thanks,but ..
I had radio buttons in place initially, which is logical.... but the client wants checkboxes as I have it now. Any chance you want to try a checkbox-friendly version?
0
 
LVL 6

Expert Comment

by:Dirar Abu Kteish
ID: 19606857
OK then change your html code  to:
<label for="smoking">Smoking:</label>
Yes: <input type="checkbox" value="Yes" name="smoking" id="SmokingY" onchange="document.getElementById('SmokingN').checked = false;"/>
No: <input type="checkbox" value="No" name="smoking" id="SmokingN" onchange="document.getElementById('SmokingY').checked = false;"/>

<label for="pets">&nbsp;&nbsp;&nbsp;Pets:</label>
Yes: <input type="checkbox" value="Yes" name="pets" id="PetsY" onchange="document.getElementById('PetsN').checked = false;"/>
No: <input type="checkbox" value="No" name="pets" id="PetsN" onchange="document.getElementById('PetsY').checked = false;"/>

and the function will be:

function validateRadio(){
            // Checking if at least one period button is selected. Or not.
                if (!document.forms[0].smoking[0].checked && !document.forms[0].smoking[1].checked){
                    alert("Please Choose Smoking Y/N");
                    return false;
                }
                //the same for pet
                if (!document.forms[0].pets[0].checked && !document.forms[0].pets[1].checked){
                    alert("Please Choose Pet Y/N");
                    return false;
                }
                return true;
           }


-dirar
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19606929
Is this not more logical?

Yes: <input type="checkbox" value="Yes" name="smoking" id="SmokingY" onClick="this.checked=true; this.form.smoking[1].checked= false;"/>
No: <input type="checkbox" value="No" name="smoking" id="SmokingN" onClick="this.checked=true;this.form.smoking[0].checked= false;" />

0
 

Author Comment

by:MichaelEvangelista
ID: 19606951
ok, getting closer, thanks...

I put your code in place for the actual checkbox fields, and
have  this in the head

<script type="text/javascript">
function validateRadio(){
            // Checking if at least one period button is selected. Or not.
                if (!document.forms[0].smoking[0].checked && !document.forms[0].smoking[1].checked){
                    alert("Please Choose Smoking Y/N");
                    return false;
                }
                //the same for pet
                if (!document.forms[0].pets[0].checked && !document.forms[0].pets[1].checked){
                    alert("Please Choose Pet Y/N");
                    return false;
                }
                return true;
           }
</script>

Then on the form, I have
onsubmit="validateRadio()"

At this point, the message for smoking y/n is coming up, but it lets the form be submitted anyway. Go ahead and test, just put 'test' in the name.

As stated in my original post, i can NOT add this to the existing CF functions. See o.p.
I need to make this work with onSubmit... something to do with the 'return' in the js script, perhaps?



0
 
LVL 6

Expert Comment

by:Dirar Abu Kteish
ID: 19606958
can be too :)
0
 
LVL 6

Expert Comment

by:Dirar Abu Kteish
ID: 19606969
try onsubmit="return validateRadio();"
0
 
LVL 6

Accepted Solution

by:
Dirar Abu Kteish earned 2000 total points
ID: 19606997
or you can do this:
instead of
<input class="formbutton" type="submit" name="SendMail" value="Send Email">
write:
<input class="formbutton" type="button" name="SendMail" value="Send Email" onclick="submitMyForm();"/>

function submitMyForm(){
   if(!_CF_checkCFForm_1(document.forms[0])){return false;}
   //check radio buttons
    if (!document.forms[0].smoking[0].checked && !document.forms[0].smoking[1].checked){
    alert("Please Choose Smoking Y/N");
    return false;
   }
   //the same for pet
   if (!document.forms[0].pets[0].checked && !document.forms[0].pets[1].checked){
   alert("Please Choose Pet Y/N");
  return false;
 }                
  //everything is ok now submit the form
  document.forms[0].submit();
}

don't forget to clear the onsubmit in the form tag

-dirar
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19607162
Like this:

onsubmit="return _CF_checkCFForm_1(this) && validateRadio(this)"

function validateRadio(theForm){
// Checking if at least one period button is selected. Or not.
  if (!theForm.smoking[0].checked && !theForm.smoking[1].checked){
    alert("Please Choose Smoking Y/N");
    return false;
  }
  //the same for pet
  if (!theForm.pets[0].checked && !theForm.pets[1].checked){
    alert("Please Choose Pet Y/N");
    return false;
  }
  return true;
}
0
 

Author Comment

by:MichaelEvangelista
ID: 19609646
Thanks all... the accepted answer works perfectly.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19609694
erm I believe mine does too but is more logical,  less invasive and will allow the form to work when JS it turned off
0
 
LVL 6

Expert Comment

by:Dirar Abu Kteish
ID: 19609768
Thanks for the point ;)
0
 

Author Comment

by:MichaelEvangelista
ID: 19610503
hi  mplungian -
at first attempt, i didnt get a validation message with the example you posted. I am sure it works, and does look perfectly logical, but needs another tweak to work with the current setup.

Also, as stated, I can't really mess *at all* with the CFFORM stuff, that is all inserted by the CF server.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19612317
Works for me when I have

<form name="CFForm_1" action="/reservations.cfm" method="post"
onsubmit="return _CF_checkCFForm_1(this) && validateRadio(this)">


and change the submit button back to submit

function validateRadio(theForm){
// Checking if at least one period button is selected. Or not.
  if (!theForm.smoking[0].checked && !theForm.smoking[1].checked){
    alert("Please Choose Smoking Y/N");
    return false;
  }
  //the same for pet
  if (!theForm.pets[0].checked && !theForm.pets[1].checked){
    alert("Please Choose Pet Y/N");
    return false;
  }
  return true;
}
0
 

Author Comment

by:MichaelEvangelista
ID: 19612901
right...

I can't put
onsubmit="return _CF_checkCFForm_1(this)
into the code because ColdFusion does that on the server, it is NOT in my page code.

( I could probably tweak the onsubmit value by putting "&& whatever" instead of jsut "whatever"... maybe next time i'll take the time to try).
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19615086
Ok.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 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