Validation of check boxes Varying number

Forum Moderators: open

Message Too Old, No Replies

Validation of check boxes Varying number

seoskunk

10:55 pm on Mar 2, 2012 (gmt 0)

Hi I have a script that shows an alert if checkboxes not checked which works fine unless I have less than the number of checkboxes it trys to validate, how can I make this script work for varying number of checkboxes

Example

<SCRIPT TYPE="text/javascript" LANGUAGE=JAVASCRIPT>
<!--

function checkCheckBoxes() {
if (document.frmTest.CHKBOX_1.checked == false &&
 document.frmTest.CHKBOX_2.checked == false &&
 document.frmTest.CHKBOX_3.checked == false)
{
alert ('You didn\'t choose any of the checkboxes!');
return false;
}
else
{
return true;
}
}
//-->
</SCRIPT>


<form onsubmit="return checkCheckBoxes();" action="">
<input type="checkbox" name="CHKBOX_1" value="1">1</p>
<input type="checkbox" name="CHKBOX_2" value="2">2</p>

<input type="submit" value="Submit!" />
</form>

Fotiman

2:28 am on Mar 3, 2012 (gmt 0)

First, the language attribute on the script tag is invalid. Don't include it.

Next, don't include HTML comments within script tags. That was needed for Netscape 1.

I can think of a couple of options. You can pass a list of checkbox names to your function, and check to see if the element exists before checking the checked property.

For example:


<form onsubmit="return checkCheckBoxes(['CHKBOX_1', 'CHKBOX_2']);" action="">

and then:


<script type="text/javascript">
function checkCheckBoxes(checkboxNames) {
  var i, el;
  for (i = 0; i < checkboxNames.length; i++) {
    el = document.frmTest[checkboxNames[i]];
    if (el) {
      if (el.checked) {
        // found a checked checkbox
        return true;
      }
    }
  }
  // No checked checkboxes were found
  return false;
}
</script>

rocknbil

3:40 pm on Mar 3, 2012 (gmt 0)

I'd do it like so:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
<script type="text/javascript"> 
window.onload=function() { 
 frm = document.getElementById('myform'); 
 if (frm) { frm.onsubmit=function() { return validateFrm(this); }; } 
}; 
// 
function validateFrm(form) { 
 // iterate through form elements, look for checkboxes 
 var check_count=0; 
 var msg=''; 
 for (j=0;j<form.elements.length;j++) { 
 var type = form.elements[j].type; 
 if (type == 'checkbox') { 
 msg += form.elements[j].id + ' checked: ' + 
form.elements[j].checked + "\n"; 
if (form.elements[j].checked) { check_count++; } 
 } 
 } 
 // You could return true here if check_count > 0 . . .  
 // if (check_count==0) { alert('no checks'); return false; } 
 // else { return true; } 
 msg = "total checked: " + check_count + "\n" + msg; 
 alert(msg); 
 return false; 
} 
</script> 
</head> 
<body> 
<form action="" id="myform" method="post"> 
<p><input type="checkbox" name="one" id="one" value="one"> <label for="one">One</label></p> 
<p><input type="checkbox" name="two" id="two" value="two"> <label for="two">Two</label></p> 
<p><input type="checkbox" name="three" id="three" value="three"> <label for="three">Three</label></p> 
<p><input type="checkbox" name="four" id="four" value="four"> <label for="four">Four</label></p> 
<p><input type="submit" value="Submit"</p> 
</form> 
</body> 
</html>

What is happening:

- window.onload attaches the behavior to the form externally, avoiding inline event handlers.
- attach the behavior to the form's submit event itself, not the button, because some forms may have multiple buttons, and some users don't use it (hit "return") and some users can't "click."
- pass the form object itself to the form (via "this" keyword - could easily use "frm")
- return true if no errors found, false if errors, this prevents or allows the submit.
- iterate through the form looking for elements of type==checkbox. An extension, you could use this same method for text fields (val=='') or selected (select-one) to put all your validations in one place.
- Checkboxes return true if checked, false if not, so you only need to ask "if (object.checked)" to see if it's checked.
- see comments in code.

Combining the two solutions, you could define an array of required fields in the Javascript and pass it as a second parameter if you only want to check SOME of the fields:


window.onload=function() { 
 var requireds=['one','three']; 
 frm = document.getElementById('myform'); 
 if (frm) { frm.onsubmit=function() { return validateFrm(this,requireds); }; } 
};

... then make changes within the validateFrm function.

seoskunk

6:38 pm on Mar 3, 2012 (gmt 0)

Thanks for both your reply's I really appreciate. I ended up using rocknbil solution and it works great. Thanks so much!