Adding form verification (in this case)

nordy · #1 (**permalink**) 10-26-10, 09:11 AM

Hi,
I've got 3 groups of radio buttons and 1 set of check boxes.
How do i check if a radio button is selected in each group of radio buttons and at least one check box is selected?
So thats one radio button needs to be selected from all three groups and one check box (all four are mandatory).
I've gone mad trying. Can u pls help.
Thanks

Code:

<html> 
<head> 
<script type="text/javascript"> 
function DisplayFormValues() 
{ 
var str = ''; 
var elem = document.getElementById('frmMain').elements; 


for(var i = 0; i < elem.length; i++) 
{
if(elem[i].checked)
{
str += elem[i].value+"<br>";
}
} 

document.getElementById('lblValues').innerHTML = str; 
document.frmMain.reset();
} 

</script> 
</head> 
<body> 

<form id="frmMain" name="frmMain"> 
Set 1
<INPUT TYPE="radio" NAME="r1" value="r1a">
<INPUT TYPE="radio" NAME="r1" value="r1b">
<INPUT TYPE="radio" NAME="r1" value="r1c">
<br>
Set 2
<INPUT TYPE="radio" NAME="r2" value="r2a">
<INPUT TYPE="radio" NAME="r2" value="r2b">
<INPUT TYPE="radio" NAME="r2" value="r2c">
<br>
Set 3
<INPUT TYPE="radio" NAME="r3" value="r3a">
<INPUT TYPE="radio" NAME="r3" value="r3b">
<INPUT TYPE="radio" NAME="r3" value="r3c">
<br>
Check 1
<INPUT TYPE="checkbox" NAME="c1" value="c1a">
<INPUT TYPE="checkbox" NAME="c1" value="c1b">
<INPUT TYPE="checkbox" NAME="c1" value="c1c">

<input type="button" value="Test" onclick="DisplayFormValues();" /> 
</form> 
<hr /> 
<div id="lblValues"></div> 

</body> 
</html>

job0107 · #2 (**permalink**) 10-27-10, 03:50 AM

HTML Code:

<html>
<head>
<script type="text/javascript">
function DisplayFormValues()
{
 var r = 0;
 var elem = document.getElementById('frmMain').elements;
 for(var i = 0; i < elem.length; i++)
 {
  if(elem[i].name == "r1" && elem[i].checked){r++;}
  if(elem[i].name == "r2" && elem[i].checked){r++;}
  if(elem[i].name == "r3" && elem[i].checked){r++;}
  if(elem[i].name == "c1" && elem[i].checked){r++;}
  }
 if(r<4)
 {
  document.getElementById('lblValues').innerHTML = "You did not check all required boxes. ";
  return false;
  }
 return true;
 }

</script>
</head>
<body>

<form id="frmMain" name="frmMain" action="#" method="POST" onsubmit="return DisplayFormValues()">
Set 1
<INPUT TYPE="radio" NAME="r1" value="r1a">
<INPUT TYPE="radio" NAME="r1" value="r1b">
<INPUT TYPE="radio" NAME="r1" value="r1c">
<br>
Set 2
<INPUT TYPE="radio" NAME="r2" value="r2a">
<INPUT TYPE="radio" NAME="r2" value="r2b">
<INPUT TYPE="radio" NAME="r2" value="r2c">
<br>
Set 3
<INPUT TYPE="radio" NAME="r3" value="r3a">
<INPUT TYPE="radio" NAME="r3" value="r3b">
<INPUT TYPE="radio" NAME="r3" value="r3c">
<br>
Check 1
<INPUT TYPE="checkbox" NAME="c1" value="c1a">
<INPUT TYPE="checkbox" NAME="c1" value="c1b">
<INPUT TYPE="checkbox" NAME="c1" value="c1c">

<input type="submit" value="Test" />
</form>
<hr />
<div id="lblValues"></div>

</body>
</html>