Validation (checking ) of period button on submit of Form

Period buttons are used when the visitor has to select one of the many options available. For example in a signup form the visitor has to select the sex by clicking on Male or Female selection. In different cases there can be more than two options also. For example mode of payment can be any one of the options saying cash, check, draft, credit card, or wire transfer. We can select one of the options out of many choices. We can check or validate the submission by checking any selection is made or not. The form will not be submitted if no selection is made.

Please note that we will be using client side JavaScript validation so if the user browser has disabled JavaScript then we can't detect the status of the selection by the user and the form will simply submit. For this reason many scripts use server side validations. In server side validation the data has to go and return from server so it takes time. JavaScript validation in client side is fast and we also can detect the JavaScript setting of the browser and redirect the visitor or give a warning message asking to enable JavaScript.

Demo of Period button Validation

There are two options here and one is to be selected. Without selection if the form is submitted the alert message will be displayed.

Here is the JavaScript code used between head tags of the html page

<script type="text/javascript"> 
function validate(form) {
// Checking if at least one period button is selected. Or not.
if (![0].checked && ![1].checked){

alert("Please Select Sex");
return false;}

alert ("The period button validation is completed")
return true;



Here is the code of the period buttons with two options


<table border='0' width='50%' cellspacing='0' cellpadding='0' ><form name=form1 method=post action=action_page.php onsubmit='return validate(this)'>

<tr bgcolor='#ffffff'><td align=center ><font face='verdana' size='2'><b>Sex</b><input type=radio name=sex value='male'>Male </font><input type=radio name=sex value='female'><font face='verdana' size='2'>Female</font></td></tr>
<tr bgcolor='#ffffff'><td align=center ><input type=submit value=Submit> <input type=reset value=Reset></td></tr>
Could not connect to MySQL