Validating checkbox fields

JavaScript
1

Hi,

I am trying to validate a checkbox selection but my code doesn’t work. Here is the code I have:

<form action="form.php" method="post" onsubmit="return validate(this);">
        Options:
	<input type="checkbox" name="options[]" value="Option 1" /> Option 1<br />
	<input type="checkbox" name="options[]" value="Option 2" /> Option 2<br />
	<input type="checkbox" name="options[]" value="Option 3" /> Option 3
	<input type="submit" name="submit" value="Submit" />
</form>
<script type="text/javascript">
	<!--
	function validate(form) {
		if(form.options[0].checked==false && form.options[1].checked==false && form.options[2].checked==false) {
			alert('Please check at least one of the options.');
			return false;
		}
		return true;
	}
	//-->
</script>

Thanks for any help.

2

What error message(s) are you getting?

3

No javascript errors.

When I submit the form without selecting any of the checkboxes, the form script (form.php) gives an error:

Invalid argument supplied for foreach()

I collect options in an array with a foreach loop.

4

That’s strange. When I copied and pasted your code into a html file and ran it, my FF and IE spat out an error. If you put an alert() inside and just below your IF block I think you’ll find the alert() inside the IF block will never be executed, hence your form is always submitted whether you check any boxes or not.

From that you should be able to figure out what the problem is with your IF condition.

5

You should be getting JavaScript errors, but because the form gets submitted you won’t see them.

The error you would get if the form didn’t submit anywhere is something along the lines of

form.options is undefined

you would have to amend your validate function to something like the below:

function validate(form) {
    //The key here is that you get all the "options[]" elements in an array
    var options = document.getElementsByName("options[]");
    
    if(options[0].checked==false && options[1].checked==false && options[2].checked==false) {
        alert('Please check at least one of the options.');
        return false;
    }
    return true;
}

In your PHP script you’ll need to make sure that “options” isn’t empty and has a length of at least 1 (you can use PHP’s built in empty() and sizeof() functions for this)

6

I was getting the js errors in both the IE9 and FF8 consoles while the function ran and before the form actually submitted.

Also, you could loop through the checkboxes

var opts = document.getElementsByName('options[]');

for(i=0; i < opts.length; i++) {
      if(opts[i].checked) {return true;}
}
return false;
7

Thanks for all the help. I used the following combination and it works now.

function validateChecks() {
		var chks = document.getElementsByName('options[]');
		var checkCount = 0;
		for (var i = 0; i < chks.length; i++) {
			if (chks[i].checked) {
				checkCount++;
			}
		}
		if (checkCount < 1) {
			return false;
		}
		return true;
	}
	function validate(form) {
		if(validateChecks()==false) {
			alert('Please fill all the required fields.');
			return false;
		}
		return true;
	}