Checkbox validation

[murfitUK]

I'm not very good with javascript so need some help! I've got a page which has a list of 6 checkboxes. The user can tick as many as they want but must choose at least one. I'm trying to validate the form with javascript and display an alert if they haven't ticked at least one box.The basic html for the form, in part, is:

<form name="addshortlist" action="shortlist.php" method="post" onsubmit='return validate_addshortlist();'><input type="checkbox" name="category[]" value="A" /> A<br /> <input type="checkbox" name="category[]" value="B" /> B<br /> <input type="checkbox" name="category[]" value="C" /> C<br /> <input type="checkbox" name="category[]" value="D" /> D<br /> <input type="checkbox" name="category[]" value="E" /> E<br /> <input type="checkbox" name="category[]" value="F" /> F<br /><input type="submit" name="addsl" value="Add To Shortlist" /></form>

The validation script, in part, is:

function validate_addshortlist()	  {	  valid = true;	  var message = 'Please correct the following errors:\n\n';// The section below doesn't work	  	  var checks=0;	  var i = document.addshortlist.category.length;	  for (x=0; x<i; x++)		{		if (document.addshortlist.category[x].checked) checks=1;		}	  if (checks==0)		{		valid = false;		message = message + '- you must choose at least one category...\n';		}	  // End of section	  	  if (document.addshortlist.client.value=='')		{		valid = false;		message = message + '- you have not selected a client...\n';		}	  	  if (document.addshortlist.urgency.value=='0')		{		valid = false;		message = message + '- you have not selected the priority...\n';		}	  	  if (document.addshortlist.dfield1.value=='')		{		valid = false;		message = message + '- you have not entered a date...\n';		}			  message = message + '\nPlease correct and then click the Add To Shortlist button again.\n';	  if (valid == false)		{		alert(message);		}	  return valid;	  }

It's the bit between the comment lines that I can't get to work correctly. Everything else is fine. I can't figure out what's wrong. Thanks.

[ShadowMage]

What is your script doing? Do you get error messages?You might want to consider getting rid of the old fashioned dot notation (document.formName.element) in favor of using id's and document.getElementById() to get references to your elements. And change your form name to an id (<form id="addshortlist"...>) You can then use the same getElementById() to get a reference to the form and use the elements property of the form to get all the inputs in the form, which you'd loop through to see if any checkboxes are checked.

[murfitUK]

Thanks for the reply. Unfortunately, I can't get the hang of javascript at all so your suggestion about using getElementsById instead is completely out of my league. My attempts to learn javascript over the last 5 years have come to nothing.Firefox's error console tells me that document.addshortlist.category is undefined in the line var i = document.addshortlist.category.length;

[jeffman]

Your looping idea is the way to go. To get the correct collection to loop through, try something like this:

var myform = document.getElementById("addshortlist");var mycheckboxes = myform.getElementsByTagName("input");// now loop through mycheckboxes and test the checked property the way you've already tried.// you may need to test the type property before you try to access the checked property.// so your loop may need a conditional likeif (mycheckboxes[x].type.toLowerCase() == "checkbox"){   if (mycheckboxes[x].checked) checks=1;}

Important! You must add this to your form tag:id="addshortlist"EDIT: corrected mistakes pointed out below.

[murfitUK]

Thanks Deirdre's Dad. How do I set up the loop now though. I take it I still need to find the number (the equivalent of var i in my previously posted code). Would it be something like var i = mycheckboxes.length - tried that but it doesn't work. And once I've got that does the loop still start at 0, or is the first element called 1?Also, in your first line should it be document.GetElementById

[ShadowMage]

Thanks Deirdre's Dad. How do I set up the loop now though. I take it I still need to find the number (the equivalent of var i in my previously posted code). Would it be something like var i = mycheckboxes.length - tried that but it doesn't work. And once I've got that does the loop still start at 0, or is the first element called 1?

The loop is identical to what you have in your original code, except the variable i will be the length of the variable mycheckboxes. Combined with DD's code above it should look something like this:

var myform = document.getElementById("addshortlist");var mycheckboxes = myform.getElementsByTagName("input");var checks=0;var i = mycheckboxes.length;for (x=0; x<i; x++)		{		if (mycheckboxes[x].type.toLowerCase() = "checkbox")		{		   if (mycheckboxes[x].checked) checks=1;		}}

Just noticed your edit. It should be document.getElementById() I didn't notice that when I copied his code either so I've fixed it in mine above.

[murfitUK]

I've solved it! Deirdre's Dad hadif (mycheckboxes[x].type.toLowerCase() = "checkbox")whereas it should be a double equal sign ==Thanks everyone.

[ShadowMage]

Deirdre's Dad hadif (mycheckboxes[x].type.toLowerCase() = "checkbox")whereas it should be a double equal sign ==

I didn't notice that either! Guess that's what happens when you write code too fast. **Hides from thescientist **

[thescientist]

[jeffman]

Sorry about the goofs. I guess I was in a hurry and wanting to help out before I split. A good lesson learned, though: always double-check borrowed code.