Solved

checkbox array validation

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

867 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

15 Experts available now in Live!

Get 1:1 Help Now