radio button validation

Forum Moderators: open

Message Too Old, No Replies

radio button validation

gleddy

6:04 am on Sep 7, 2004 (gmt 0)

I have figured out how to do this using another method, but I am stuck figuring out this for...loop method which I figure must be the most effecient for validating radio buttons.

I am trying to make sure the user picks ONE radio button, and does not miss them.

here is the code:

<html>
<head>
<title>Radio button validation</title>
<script type="text/javascript">

</script>
</head>

<body>
<form method="post" action="#" onsubmit="checkForm(this)">
Larry: <input type="radio" name="button" value="larry"><br>

Moe: <input type="radio" name="button" value="moe"><br>
Curly: <input type="radio" name="button" value="curly"><br>
<input type="submit" name="submit" value="submit">
</form>

</body>
</html>

I swear I am close?
cheers for help.
s.

Bernard Marx

7:12 am on Sep 7, 2004 (gmt 0)

Closeish

You've seen that when you use a radio group by name you get a collection, so you loop through it, but you are then testing directly against the collection itself, not one of it's members:

form.button.checked == false

It doesn't have a checked property, so "undefined" is compared to false - ie: false.

You also need to test to see whther none of them has been checked. You have been testing to see whether any of them is unchecked - which is always the case with radios.

I've referenced via the form's elements collection, which is more 'proper' these days.

function checkForm(form) 
{
  var checked = false;
  var buttons = form.elements.button;
  for (var i=0; i<buttons.length; i++) 
  { 
    if (buttons[i].checked) { 
      checked = true;
      break; 
    } 
   }
   if(!checked)
     alert("you have to choose a button"); 
   return checked ;
}

You will also have to return a true/false value, and return that within the event handler to prevent the form being submitted if false.

[pre]onsubmit="return checkForm(this)"[/pre]

Cochrane

10:25 pm on Sep 7, 2004 (gmt 0)

gleddy:
Does this help?

function checkForm(isForm,btnID){

nRadio = 0;
ok = false;
for (n=0; n<isForm.length; n++)
{
if (isForm[n].type == 'radio'){nRadio++}
}
for (i=0; i<nRadio; i++)
{
if(isForm.button[i].checked == true){ok = true}
}
if (ok == false){alert('Please make a selection')};
else {document.getElementById(btnID).disabled = true}

}

</Script>
</Head>
<body>
<form name='demoForm'>
Larry: <input type="radio" name="button" value="larry"><br>
Moe: <input type="radio" name="button" value="moe"><br>
Curly: <input type="radio" name="button" value="curly"><br>
<input type="button" id='submit1' value="Submit" onClick="checkForm(demoForm,'submit1')">
</form>
</body>
</html>

gleddy

11:20 pm on Sep 7, 2004 (gmt 0)

hey guys,

thanks for the help...

cochrane, yours works nicely on its' own, but I am intending to use this in a validation function that test other fields as well(regular text fields, etc). So I want to chuck this into a large function (checkForm(form))that does other things as well, any way to do that?

Cochrane

11:55 pm on Sep 7, 2004 (gmt 0)

Gleddy:

Okay, this line:
if (isForm[n].type == 'radio'){nRadio++}

well, you can check for all the different "types". A text area, is 'textarea'. I can't recall of them, but just put an alert, like this:

for (n=0; n<isForm.length; n++){alert(isForm[n].type)}

so that you can find out all the element designations, and then just check for them all.

If this doesn't help, then can you provide an example, and I'll provide an example in response.