?
Solved

checkbox array validation

Posted on 2007-03-23
4
Medium Priority
?
3,474 Views
Last Modified: 2008-06-18
I have 2 sets of checkboxes on my form


<input type="checkbox" name="service[]" value="Online Store Website" onclick='toggleLayer("store")' />
<input type="checkbox" name="service[]" value="Print Design" /></td>
<input type="checkbox" name="service[]" value="Web Design or Redesign (non-Store)"  onclick='toggleLayer("page")' /><input type="checkbox" name="service[]" value="MySpace Profile Design" />
<input type="checkbox" name="service[]" value="Add-On Packages"  onclick='toggleLayer("packages")' />
<input type="checkbox" name="service[]" value="Custom Programming" />
<input type="checkbox" name="service[]" value="Flash Animation/Flash Website" />


and the next set

<input type="checkbox" name="pid[]" value="3" />
<input type="checkbox" name="pid[]" value="2" />
<input type="checkbox" name="pid[]" value="1" />
<input type="checkbox" name="pid[]" value="4" />

I need to validate both these checkboxes to ensure that atleast one option is selected in each case. Thanks for all the help.                                                            
0
Comment
Question by:sulentho
[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
  • 3
4 Comments
 
LVL 28

Expert Comment

by:TName
ID: 18783456
Try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function validateCB(theName){
   var counter=0;
   var cb=document.getElementsByName(theName)
   for (i=0; i<cb.length; i++) {
        if((cb[i].tagName=='INPUT')&&(cb[i].type=='checkbox')){
          if (cb[i].checked)
             counter++;
        }
   }
   if (counter==0) {  
   return false;
  }
return true;
}


function validate(){
   var ok=validateCB('service[]');
   if (!ok) alert('No checkbox checked in first group!');
   ok=validateCB('pid[]');
   if (!ok) alert('No checkbox checked in second group!');
}

</script>
</head>
<body>
<form>
<input type="checkbox" name="service[]" value="Online Store Website" onclick='toggleLayer("store")' />
<input type="checkbox" name="service[]" value="Print Design" /></td>
<input type="checkbox" name="service[]" value="Web Design or Redesign (non-Store)"  onclick='toggleLayer("page")' /><input type="checkbox" name="service[]" value="MySpace Profile Design" />
<input type="checkbox" name="service[]" value="Add-On Packages"  onclick='toggleLayer("packages")' />
<input type="checkbox" name="service[]" value="Custom Programming" />
<input type="checkbox" name="service[]" value="Flash Animation/Flash Website" />
<br><br>
<input type="checkbox" name="pid[]" value="3" />
<input type="checkbox" name="pid[]" value="2" />
<input type="checkbox" name="pid[]" value="1" />
<input type="checkbox" name="pid[]" value="4" />
<br><br>
<input type="button" value="Check" onClick="validate()">
</form>
</body>
</html>
0
 
LVL 28

Expert Comment

by:TName
ID: 18783485
Or you can change validate() like this - it will now return a value: false if in at least one group no cb has been checked, true if in both groups at least one checkbox has been checked. The other function remains unchanged.

function validate(){  
   var ok1=validateCB('service[]');
   if (!ok1)
      alert('No checkbox checked in first group!');
   var ok2=validateCB('pid[]');
   if (!ok2)
      alert('No checkbox checked in second group!');
   if ((!ok1)||(!ok2))
      return false;
   return true;
}
0
 

Author Comment

by:sulentho
ID: 18783496
I am sorry if I was not clear earlier I need the validations to be split up into 2 functions because I have other form fields in between them that need to be validated.Thanks for all the help

function validateCB(theName){
var counter=0;
var cb=document.getElementsByName(theName)
for (i=0; i<cb.length; i++) {
if((cb[i].tagName=='INPUT')&&(cb[i].type=='checkbox')){
if (cb[i].checked)
counter++;
}
}
if (counter==0) {  
return false;
}
return true;
}


function validService(){
var ok=validateCB('service[]');
if (!ok) alert('Please select atleast one Service Option.');
}

function validPackage(){
var ok=validateCB('pid[]');
if (!ok) alert('Please select atleast one Add-On Package.');
}

function validateForm1(theForm)
{
// Start ------->
if (!validRequired(theForm.name,"Name"))
return false;
if (!validEmail(theForm.email,"Email Address",true))
return false;
if (!validRequired(theForm.phone,"Phone Number"))
return false;
if (!validService())
return false;
if (!validSelect(theForm.smo,"Launch Month"))
return false;
if (!validSelect(theForm.smo,"Launch Month"))
return false;
if (!validSelect(theForm.sday,"Launch Day"))
return false;
if (!validSelect(theForm.syr,"Launch Year"))
return false;
if (!validPackage())
return false;
if (!validRequired(theForm.prodsku,"Number of SKU's"))
return false;
if (!validRadio())
return false;
// <--------- End
return true;
}


<form name="questionnaire" action="index.php" method="post" onSubmit="return validateForm1(this)">

</form>
0
 
LVL 28

Accepted Solution

by:
TName earned 2000 total points
ID: 18783681
I'm not sure I understand you correctly...
You can validate the checkboxes from whereever you want, just call the function validateCB() with an argument... for instance you can call it twice from within validateForm1() - with or without the alerts:


...

 if (!validateCB('service[]')) {
   //alert('Please select atleast one Service Option.');
   return false;
 }

...

 if (!validateCB('pid[]')) {
   //alert('Please select atleast one Add-On Package.');
   return false;
}

...

0

Featured Post

Industry Leaders: 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

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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

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