Validating radio groups for survey issue

JavaScript
1

The problem:

I can’t get the code to send out my alerts due to empty radio groups.

what I’m trying to accomplish:

I want Javascript to send a alert to the user if none of the radio buttons within a group are checked.

Short Summary:

I’m new to Javascript and I’ve been trying to figure this out myself, but I honestly don’t know what’s wrong. If you guys can help that’d be great. Thanks in advance. and if the information that I’ve provided is in anyway confusing let me know and I’ll try to help, but again my knowledge is limited. :x

Here is a simplified version of my form.There are originally 10 questions total. “Names: q1-q10”



<html>
<head>
<script type="text/javascript" src="val.js"></script>
</head>
<body>
<form method="POST" name="theForm" onsubmit="javascript:check();"  class="surv_style" >
 <p class="ttl" ><label>Question 1:	</label></p>
  <p><label> <input type="radio" name="q1" value="yes"> Yes </label></p>
  <p><label> <input type="radio" name="q1" value="some"> Sometimes </label></p>
  <p><label> <input type="radio" name="q1" value="no"> No </label></p>
 <p class="ttl" ><label>Question 2: </label></p>
  <p><label> <input type="radio" name="q2" value="yes"> Yes </label></p>
  <p><label> <input type="radio" name="q2" value="somet"> Sometimes</label></p>
  <p><label> <input type="radio" name="q2" value="no"> No</label></p>
  <p><label> <input type="radio" name="q2" value="no_notice"> I havent noticed</label></p>
 <p class="ttl" ><label>Question 3: </label></p>
  <p><label> <input type="radio" name="q3" value="yes"> Yes </label></p>
  <p><label> <input type="radio" name="q3" value="somet"> Sometimes</label></p>
  <p><label> <input type="radio" name="q3" value="no"> No</label></p>
	<input type="submit" name="sub_butt" value="Submit">
</form>
</body>
</html>

Here is my Javascript code:


function valR_butt(rbgn){ 
	var formName = "theForm";
	var form = document.form[formName];
	var isChecked = false;
	var counter = form[rbgn].length;
	
	for(var x=0;x<counter;x++){
		
		if(form[rbgn][x].checked==true){
			isChecked=true;
			break;
		}
	}

	if(isChecked==false){ 
		alert(errorMessage);
		return false;
	
	}else{ 
		return true;

	} 
}
function check(){
	
	var q1 =validateRadioButton("q1");
	if(q1==false){
		
		alert("Please select a answer to question 1"); 
		return false;
	}

	function check(){
		
		var q2 =validateRadioButton("q2");
		if(q1==false){
			
			alert("Please select a answer to question 2"); 
			return false;
			
	function check(){
		
		var q3 =validateRadioButton("q3");
		if(q1==false){
			
			alert("Please select a answer to question 3"); 
			return false;
			
		}
		alert("OK!\
Your selection is valid");
		return true;

	}
}
2

This demo is one option.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
function validateForm() {
    if(checkRadButtons("rad1")) {
     alert("do this");
    } else {
        alert("do something else");
    }
}
 
function checkRadButtons(group) {
  var rad1Btns = document.getElementsByName(group);
  var isBtnChecked = false
    for(var i=0; i < rad1Btns.length; i++) {
       if(rad1Btns[i].checked) {
         isBtnChecked = true;
            i = rad1Btns.length;
       }
    }
    return isBtnChecked;
}

</script>
</head>
<body>
 
<form onsubmit="return validateForm()">
      <input type="radio" name="rad1" value="val1" />
      <input type="radio" name="rad1" value="val2" />
      <input type="radio" name="rad1" value="val3" />
      <input type="submit" value="submit" />
</form>
 
</body>
</html>
3

Thx Kalon. :slight_smile: