radio button form validation

**gingerj** · Apr 5, 2006, 01:14

Hi I'm trying to get some validation working on a set of form elements but my alert keep's on alerting regardless of the radio btn being checked. Can someone tell me what I'm doing wrong please.

Code:

<html>
<title>Radio Button Validation</title>
<body bgcolor="#FFFFFF">

<script language="JavaScript">
function checkform()
{
if (!document.feedback.field.checked) {
		alert('There is a problem with...');
	return false;
}
}
</script>


<form onSubmit="checkform()" name="feedback">
<input type="radio" value="A" name="field">A
<br>
<input type="radio" value="B" name="field">B
<br>
<input type="radio" value="C" name="field">C
<br>
<input type="radio" value="D" name="field">D
<br>
<input type="submit" value="Submit">
</form>

</body>
</html>

**gingerj** · Apr 5, 2006, 02:10

Solved the first bit to my problem, but I've got another problem as I'm not a strong JS programmer how can I tweak the script so that it checks more than one set of radio buttons as I'm building a questionnaire and will be asking more than one question ie. something like this:

Code:

<html>
<title>Radio Button Validation</title>
<body bgcolor="#FFFFFF">

<script language="JavaScript">
function valbutton(thisform) {
myOption = -1;
for (i=thisform.myradiobutton.length-1; i > -1; i--) {
if (thisform.myradiobutton[i].checked) {
myOption = i;
}
}
if (myOption == -1) {
alert("You must select a radio button");
return false;
}

alert("your cool");

thisform.submit(); 
}
</script>


<form name="myform">
<input type="radio" value="1st value" name="myradiobutton" />1st<br />
<input type="radio" value="2nd value" name="myradiobutton" />2nd<br />
<input type="radio" value="3rd value" name="myradiobutton" />3rd<br />&nbsp;<br />

<input type="radio" value="1st value" name="myradiobutton2" />a<br />
<input type="radio" value="2nd value" name="myradiobutton2" />b<br />
<input type="radio" value="3rd value" name="myradiobutton2" />c<br />&nbsp;<br />
<input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" />
</form>

</body>
</html>

**gices** · Apr 5, 2006, 07:39

You can use multiple form names: myform1, myform2 and have the same radio button name that is myradiobutton or you can modify your function so that it passes the radiobutton instead of the form name. Therefore you will have only one form, that is myform and call your function like this: valbutton(myradiobutton1) or valbutton(myradiobutton2).

**jimfraser** · Apr 5, 2006, 07:47

In this example I made an array of the names of the radio buttons to check and loop through them:

Code:

function valbutton(thisform) {
	var radios = ["myradiobutton1","myradiobutton2","myradiobutton3"];
	
	for( var j=0; j < radios.length; j++ ) {
		myOption = -1;
		for (i=thisform.elements[radios[j]].length-1; i > -1; i--) {
			if (thisform.elements[radios[j]].checked) {
				myOption = i;
			}
		}
		if (myOption == -1) {
			alert("You must select a radio button for " + radios[j]);
			return false;
		}
		
	}

	alert("your cool");

	thisform.submit(); 
}

Keep in mind that if the person doesnt click the submit button but simply presses enter the form will submit without running the validate function.

To fix that, call the validate function in the onsubmit event of the form tag and make the function return true or false.

The SitePoint Forums have moved.

User Tag List

Thread: radio button form validation

Thread Tools

Display

radio button form validation

Bookmarks

Bookmarks

Posting Permissions