Solved

checkbox array validation

Posted on 2007-03-23
4
3,462 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
  • 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 500 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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now