Validating Radio Button Group Selections Prior to Submitting Form Results
The Web browser allows the Web site visitor to select only a single radio button from any group of radio buttons with the same name attribute value. As such, you need not use JavaScript to test for multiple radio button selections within a single radio button group. However, the Web browser does not force the site visitor to select at least one of the radio buttons in any button group. As such, you must write a validation function that checks the number of radio buttons selected in each button group that you do not want the visitor to skip.
Suppose, for example, that your form includes the two groups of radio buttons. If each of the radio buttons in the first group has its name attribute set to “Contact_Ok”, and each of the buttons in the second group has its name attribute set to “User_Count”, you can use the following JavaScript to ensure that the visitor selects one radio button from each of the two radio button groups:
<html><body>
<script language="JavaScript">
<!--
function ValidateForm(Form)
{
function countSelections(buttonGroup)
{
for (i = 0; i < buttonGroup.length; i++)
{
if (buttonGroup[i].checked) return (true);
}
return (false);
}
//** Other form validation statements **
if (!countSelections(Form.Contact_Ok))
{
alert("Please select either \"Yes\" or \"No\" from the" + " \"Contact\" options.");
return (false);
}
if (!countSelections(Form.User_Count))
{
alert("Please select one of the \"User Count\" options.");
return (false);
}
return(true);
}
// -->
</script>
Notice that each button group has a length property that you can use to “step through” the group button array—checking the value of the checked property for each button in the group. By passing first the Contact_Ok button group and then the User_Count button group to the countSelections() function, you can use the same code to check for a selection in each of the two radio button groups— even though each button group has a different number of buttons. The checked property value of
the selected radio button in each button group is True. Therefore, the countSelections() function will return True for any button group passed to it in which at least one radio button was selected. For any button groups in which the visitor failed to make a selection (or said another way, for any radio button groups the user skipped, the function will return False). The ValidateForm() function (which called the countSelections() function), in turn, will return a value returned by the countSelections() function to the calling onSubmit attribute in the <form> tag.
As you learned in the preceding Tip, to have the Web browser execute the form validation function when the visitor clicks Submit, add the onSubmit attribute to the form’s <form> tag, such that it reads something like this:
<form name="ExampleForm" onSubmit="return ValidateForm (ExampleForm)" action="http://NVBizNet2.com/_scripts/_pl/FrmScrpt.CGI" method="POST"
enctype="application/x-www-form-urlencoded">
Make sure you do not omit the return that precedes the ValidateForm() function call; otherwise, the Web browser will still submit the form results to the Web server, even if the ValidateForm() function returns a value of False to indicate that a problem occurred with the form’s data. When written correctly (as in the current example), the onSubmit attribute tells the Web browser to execute a JavaScript function to validate the form results after the site visitor clicks Submit. If the function returns True, the Web browser will submit the form results to the URL specified as the value of the method attribute in the <form> tag. Otherwise, the Web browser will return to form data entry.