checkbox array validation

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.                                                            
sulenthoAsked:
Who is Participating?
 
TNameConnect With a Mentor Commented:
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
 
TNameCommented:
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
 
TNameCommented:
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
 
sulenthoAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.