Checkbox form validation using client side JavaScript

Check box is used to get user inputs within the form. A group of checkbox is used or a single check box is used to collect the options of the visitor.

Managing Checkboxes by Reading status and validating with option to enable or disable in a form

<form  name=f1>
<input type=checkbox name=c1 id=c1 value=Python> Python
<input type=checkbox name=c2 id=c2 value=PHP> PHP
<input type=checkbox name=c3 id=c3 value=JavaScript> JavaScript

<input type=button name=b1 id=b1 value=Submit onClick=my_check()>
<br></form>

<div id=d1>Output here </div>

Three checkboxes for the user to select. Here name attribute of the checkbox is not common. To get the status of any checkbox we can use like this.

var my_c = document.f1.c1.checked;// true if checked, false otherwise

By using getElementById()

var my_c = document.getElementById('c1');

You can also use getElementsByName

In signup forms you will see one checkbox asking you to read the terms and conditions of the site and the user must agree to this by selecting a checkbox. On submit of the form the status of this checkbox is checked and if not checked by the user then alert message is displayed saying the user has to agree to the terms and conditions.

Here is one example of this system. For easy understanding one period button validation is included in the checking also. The user has to select one of the sexes and must agree to terms and condition by checking the checkbox.
DEMO of checkbox validation
The JavaScript code is kept within the head tag of the page. See the validation

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

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


if(!document.form1.agree.checked){alert("Please check the terms and conditions");
 return false; } 


return true;
}
</script>

To display the period button and check box see the code below.

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


<tr bgcolor='#ffffff'><td align=center  ><font face='verdana' size='2'><b>gender</b>
<input type=radio name=gender value='male'>Male </font><input type=radio name=gender value='female'>
<font face='verdana' size='2'>Female</font></td></tr>

<tr><td align=center  bgcolor='#f1f1f1'><font face='verdana' size='2'>
<input type=checkbox name=agree value='yes'>I agree to terms and conditions  </td></tr>

<tr bgcolor='#ffffff'><td align=center  >
<input type=submit value=Submit> <input type=reset value=Reset></td></tr>

</table></form>

Using addEventListener()

<html>
<head>
<title>(Type a title for your page here)</title>
<META NAME="DESCRIPTION" CONTENT=" ">
<META NAME="KEYWORDS" CONTENT=" ">

</head>

<body >
<form name=form1 method=post action=action_page.php onsubmit='return validate(this)'><input type=hidden name=todo value=post>

<div ><b>gender</b><input type=radio name=gender value='male'>Male </font><input type=radio name=gender value='female'>Female</div></div>

<div><div ><input type=checkbox name=agree value='yes'>I agree to terms and conditions  </div>
<div ><div id='my_msg'>Submit the form by clicking the button</div></div></div>

<div ><div ><input type=Submit value=Submit> <input type=reset value=Reset></div></div>
</form>

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

//alert("Please Select gender"); 
document.getElementById('my_msg').innerHTML="Select gender by selecting radio buttons before submitting ";
return false;}

if (!document.form1.agree.checked) { 
document.getElementById('my_msg').innerHTML="Agree to Terms & Conditions checkbox before submitting ";
 return false; } 

document.getElementById('my_msg').innerHTML="Validation is complete.";
return true;
}
</script>
</body>

</html>

Disable Checkbox
JavaScript Checkbox Reference

Subscribe to our YouTube Channel here

shashi	24-06-2010
thanks for such a small and beautiful script. It worked exactly the way i want.

Lesley Olley	08-09-2011
Could I add another range of radio button with a different criteria into the same form?

vamshi	22-10-2011
I want a script for both the radio buttons in such a way that one text field should be displayed when I select Yes radio button and another text field should be displayed when I select No radio button. Please do the needful and I need it as soon as possible. Thanks in advance, Vamshi.

Senthilnathan.V	02-04-2012
Can i have a script which will embed with regular expression in C#

Richa	23-08-2012
I want a html code with a textbox and a button with a fuction to handle onclick event of botton which displays the text written in the textbox on the botton. I shall be lookinf for all our positive respons!! plz post it as soon as possible..

jayashree	10-10-2012
How to validate list in javascript.Please send it as soon as possible

Validation (checking ) of checkbox selection on submit of Form

Using addEventListener()

Subscribe