Checkform radio group validation

[marynorn]

I have five radio groups, all yes/no. I don't want to have any buttons initially selected, but I do want it be impossible to submit the form without checking one of the buttons. I've been playing around with various checkform values, but so far I have nothing that works.

My form:

<form action="consult_ty.php" method="post" name="form1" id="form1" onSubmit="return checkForm(this);">
    <p>1. *question goes here*</p>
   <p>
      <label>
      <input name="1" type="radio" id="1_0" onclick="MM_showHideLayers('1a','','hide')" value="Yes" />
Yes</label>
      <br />
      <label>
      <input name="1" type="radio" id="1_1" onclick="MM_showHideLayers('1a','','show')" value="No" />
No</label>
      <label></label>
      <br />
    </p>
    <p>1a. If not, why not?</p>
    <p>
      <textarea name="1a" id="1a" cols="60" rows="5"></textarea>
    </p>

...and so on down the page

And my inept attempt at checkform:

<script language="JavaScript"
  type="text/javascript">
function checkform(form1) {
  for (var i=0; i<form1.elements["1"].length;
    i++) {
    var radio = form1.elements["1"][i];
    if (radio.checked) {
      return true;
    }
  }
  window.alert("Please select 'Yes' or 'No'!");
  form1.elements["1"][0].focus();
  return false;
}
</script>

[rangana]

function checkForm(e)
{
var radio=document.getElementsByTagName('input'),bool=false;
for(var i=0;i<radio.length;i++)
	{if(radio[i].type=='radio'&&radio[i].checked==true) bool=true}
	return bool;}

[marynorn]

Thank you! That stops the form from submitting perfectly. Is there any way to get a 'please choose yes or no for every question' alert to show up as well?

[jscheuer1]

function checkForm(e)
{
var radio=document.getElementsByTagName('input'),bool=false;
for(var i=0;i<radio.length;i++)
	{if(radio[i].type=='radio'&&radio[i].checked==true) bool=true}
	return bool;}

That looks like it would require only one button on the page be checked. I may have missed something though.

[rangana]

Thank you! That stops the form from submitting perfectly. Is there any way to get a 'please choose yes or no for every question' alert to show up as well?

Add the highlighted:

function checkForm(e)
{
var radio=document.getElementsByTagName('input'),bool=false;
for(var i=0;i<radio.length;i++)
	{if(radio[i].type=='radio'&&radio[i].checked==true) {
alert('Please choose year or no for every question');bool=true}}
	return bool;}

@jscheuer1,
I don't know, I was just basing from his requirement:

but I do want it be impossible to submit the form without checking one of the buttons

I'm not always good at grasping english, but that's what I understand (at least one should be selected).

[marynorn]

Ah, yes. As long as one radio button is selected, the form submits. I've got five radio groups, all of which need to be clicked on.

But it's a huge step closer than I was yesterday, so thank you. Can it be modified for each radio group?

[rangana]

The one I've provided does'nt check for five radio groups. It only check if (at least) one radio button is selected, I'm referring to the whole radio buttons.

There should be slight modification with the code, but we can't start whipping one for you since we're not aware how your markups is constructed.

Up your (complete) HTML so we could start playing on it.

[marynorn]

Oh boy, the whole page? That's a lot of code. I'd rather just put in the form and the head, if that's okay? There's a ton of completely irrelevant stuff on there.

Form:

<form action="consult_ty.php" method="post" name="form1" id="form1" onSubmit="return checkForm(this)">
    <p>1. *insert question*?</p>
     
    <p>
      <label>
      <input name="1" type="radio" id="1_0" onclick="MM_showHideLayers('1a','','hide')" value="Yes" />
Yes</label>
      <br />
      <label>
      <input name="1" type="radio" id="1_1" onclick="MM_showHideLayers('1a','','show')" value="No" />
No</label>
      <label></label>
      <br />
    </p>
     
    
    <p>1a. If not, why not?</p>
     
    <p>
      <textarea name="1a" id="1a" cols="60" rows="5"></textarea>
    </p>
     
    <p>---</p>
     
    <p>2. *insert question*?    </p>
     
    <p>
      <label>
      <input name="2" type="radio" id="2_0" onclick="MM_showHideLayers('2a','','hide')" value="Yes" />
Yes</label>
      <br />
      <label>
      <input name="2" type="radio" id="2_1" onclick="MM_showHideLayers('2a','','show')" value="No" />
No</label>
      <br />
    </p>
     
    <p>2a. If not, why not?</p>
     
    <p>
      <textarea name="2a" id="2a" cols="60" rows="5"></textarea>
    </p>
     
    <p>---</p>
     
    <p>3. *insert question*?  </p>
     
    <p>
      <label>
      <input name="3" type="radio" id="3_0" onclick="MM_showHideLayers('3a','','hide')" value="Yes" />
Yes</label>
      <br />
      <label>
      <input name="3" type="radio" id="3_1" onclick="MM_showHideLayers('3a','','show')" value="No" />
No</label>
      <br />
      <br />
    </p>
     
    <p>3a. If not, why not?</p>
     
    <p>
      <textarea name="3a" id="3a" cols="60" rows="5"></textarea>
    </p>
     
    <p>---</p>
     
    <p>4. *insert question*?</p>
     
    <p>
      <label>
      <input name="4" type="radio" id="4_0" onclick="MM_showHideLayers('4a','','hide')" value="Yes" />
Yes</label>
      <br />
      <label>
      <input name="4" type="radio" id="4_1" onclick="MM_showHideLayers('4a','','show')" value="No" />
No</label>
      <br />
    </p>
     
    <p>4a. If not, why not?</p>
     
    <p>
      <textarea name="4a" id="4a" cols="60" rows="5"></textarea>
    </p>
     
    <p>---</p>
     
    <p>5. *insert question*? </p>
     
    <p>
      <label>
      <input name="5" type="radio" id="5_0" onclick="MM_showHideLayers('5a','','hide')" value="Yes" />
Yes</label>
      <br />
      <label>
      <input name="5" type="radio" id="5_1" onclick="MM_showHideLayers('5a','','show')" value="No" />
No</label>
      <br />
    </p>
     
    <p>5a. If not, why not?</p>
     
    <p>
      <textarea name="5a" id="5a" cols="60" rows="5"></textarea>
    </p>
    <p><br />
    </p>
     
    <p>---</p>
	 
	<p>6. *insert question*
</p>
     
    <p>
      <label>
      <input name="5d" type="radio" id="5d_0" onclick="MM_showHideLayers('5e','','hide')" value="Yes" />
Yes</label>
      <br />
      <label>
      <input name="5d" type="radio" id="5d_1" onclick="MM_showHideLayers('5e','','show')" value="No" />
No</label>
      </p>
     
    <p>6a. If not, why not?</p>
     
    <p>
      <textarea name="5e" id="5e" cols="60" rows="5"></textarea>
      <br />
    </p>
     
    <p>---</p>
     
    <p>7. Please  use this space for any other comments you want to make about our ******. </p>
     
    <p>
      <textarea name="6" id="6" cols="60" rows="5"></textarea>
    </p>
     
    <p>---</p>
     
    <p>9. Are you:</p>
     
    <p>
      <label>
      <input type="radio" name="8" value="Tenant" id="8_0" />
tenant</label>
      <br />
      <label>
      <input type="radio" name="8" value="Applicant" id="8_1" />
applicant</label>
      <br />
      <label>
      <input type="radio" name="8" value="Housing professional" id="8_2" />
a housing professional</label>
      <br />
      <label>
      <input type="radio" name="8" value="Other" id="8_3" />
Other - please state </label>
      <input type="text" name="9a" id="9a" />
      <br />
    </p>
     
    <p>---</p>
     
    <p>If you want to be entered into our £100 Prize Draw, please fill in your details below.</p>
     
    <table width="100%" border="0" cellspacing="5" cellpadding="0">
      <tr>
        <td>Name:</td>
        <td><input type="text" name="name" id="name" /></td>
      </tr>
      <tr>
        <td>E-mail</td>
        <td><input type="text" name="email" id="email" /></td>
      </tr>
    </table>
     
     
    <p>
      <input name="submit" type="submit" id="submit" value="Submit" />
    </p>
  </form>

Head:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<meta name="Description" content="Page title." />
<meta name="Keywords" content="stuff in here"  />
<title>Title of the page</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!--default stylesheet for screen viewing-->
<link href="css/style_consult.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<script language="JavaScript"
  type="text/javascript">
function checkForm(e)
{
var radio=document.getElementsByTagName('input'),bool=false;
for(var i=0;i<radio.length;i++)
	{if(radio[i].type=='radio'&&radio[i].checked==true) {
alert('Please choose yes or no for every question');bool=true}}
	return bool;}
</script>
<!-- InstanceEndEditable -->
<!--javascript for the menu bar-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<!--stylesheet for the menu bar-->
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!--javascript for menu bar rollovers-->
<script type="text/javascript" src="javascript/rollover_lrg.js"></script>
<!--stylesheet for printed pages-->
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<!-- stylesheet for small screen - PDA and phones-->
<link href="css/handheld.css" rel="stylesheet" type="text/css" media="handheld" />
<!--alternate stylesheet for larger text-->
<link href="css/style_bigtext.css" rel="alternate stylesheet" type="text/css" title="alternate" media="screen" />
<!--javascript for the text resize function-->
<script type="text/javascript" src="javascript/styleswitcher.js"></script>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</head>

[jscheuer1]

This worked out in limited testing:

<script type="text/javascript">
function checkForm(f){
for (var els = f.elements, radio_groups = {}, i = els.length - 1; i > -1; --i)
if(els[i].type && els[i].type == 'radio' && !radio_groups[els[i].name])
radio_groups[els[i].name] = els[i].checked;
for (var p in radio_groups)
if (!radio_groups[p]){
alert('Please check one answer for each question!');
return false;
}
return true;
}
</script>

It only checks the form. For it to work, all radio buttons must have names (as the currently do). However, it is preferred for these to start with letters, not numbers. This has nothing to do with the script, it works fine with numbers or letters. The HTML specification calls for names, classes, and ids to begin with letters.

[marynorn]

That is great, thank you so much! I've just tested it, and it works beautifully.