How To Validate Checkbox In jQuery

In this article, we will see how to validate checkboxes in jquery. Here we will learn about to check at least one checkbox is checked or not using jquery. In HTML form sometime we have multiple selection options to check at that time we need to check validation for all fields.

So, let's see how to validate multiple checkboxes in jquery, how to check if at least one checkbox is checked in jquery, jquery check if a checkbox is checked, and how to check if any of the checkboxes are checked in jquery.

Add HTML:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>How To Validate Checkbox In jQuery - Techsolutionstuff</title>
		<link href='https://fonts.googleapis.com/css?family=Dosis:600' rel='stylesheet' type='text/css'/>
	</head>
	<body>
		<div class="wrap">
			<h2>How To Validate Checkbox In jQuery - Techsolutionstuff</h2>
			<ul class="js-errors"></ul>
			<form action="#" id="form" method="post">
				<h3>Select Languages:</h3>
				<ul>
					<li>
						<input type="checkbox" name="checkbox[]" id="checkbox1">
						<label for="checkbox1">Laravel</lable>
					</li>
					<li>
						<input type="checkbox" name="checkbox[]" id="checkbox2">
						<label for="checkbox2">PHP</lable>
					</li>
					<li>
						<input type="checkbox" name="checkbox[]" id="checkbox3">
						<label for="checkbox3">jQuery</lable>
					</li>
					<li>
						<input type="checkbox" name="checkbox[]" id="checkbox4">
						<label for="checkbox4">MySQL</lable>
					</li>
					<li>
						<input type="checkbox" name="checkbox[]" id="checkbox5">
						<label for="checkbox5">Python</lable>
					</li>
					<li>
						<input type="checkbox" name="checkbox[]" id="checkbox6">
						<label for="checkbox6">Node.JS</lable>
					</li>
				</ul>
				<input type="submit" name="Submit" value="Submit" />
			</form>
		</div>
	</body>
</html>

 

Add CSS:

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

input,
select,
input[type="checkbox"],
input[type="radio"] {
	-webkit-border-radius: 0;
	-webkit-appearance: none;
	outline: none;
}

body {
	font-family: 'Dosis', Helvetica, Arial, sans-serif;
	font-size: 100%;
}

.wrap {
	border-radius: 4px;
	color: darken(#2a4a59, 5%);
	font-size: 1.2em;
	margin: 2em auto;
	padding: 2em;
	max-width: 720px;

	@media screen and (max-width: 460px) {
		padding: 0.5em;
	}
}

h3 {
	font-size: 1.3em;
	margin-bottom: 0;
}

h2 {
	font-size: 1.3em;
	margin-bottom: 25px;
}

li {
	margin-bottom: 1.5em;
	padding-left: 2.5em;
	position: relative;
}

input[type="checkbox"],
input[type="radio"],
li label::before {
	cursor: pointer;
	height: 40px;
	left: 0;
	margin-top: -20px;
	position: absolute;
	width: 40px;
	top: 50%;
}

input[type="checkbox"],
input[type="radio"] {
	display: inline-block;
	opacity: 0;
	vertical-align: middle;
}

li label::before {
	border: 2px solid lighten(#2a4a59, 10%);
	border-radius: 4px;
	color: darken(#48CFAD, 20%);
	content: '';
	font-size: 1.5em;
	padding: .1em 0 0 .2em;
}

li input.error+label::before {
	border-color: #f93337;
}

li input[type="checkbox"]:checked+label::before {
	border-color: darken(#48CFAD, 20%);
	content: '\2714';
}

li input[type="radio"]+label::before {
	border-radius: 50%;
}

li input[type="radio"]:checked+label::before {
	border-color: darken(#48CFAD, 20%);
	content: '\25CF';
	font-size: 1.5em;
	padding: 0 0 0 .3em;
}

input[type="submit"] {
	background: #37BC9B;
	border: none;
	color: darken(#37BC9B, 30%);
	cursor: pointer;
	font-family: "AvenirNextLTW01-DemiCn", sans-serif;
	font-size: 1.4em;
	padding: .5em;
	width: 100%;

	&:hover,
	&:focus {
		background: darken(#37BC9B, 5%);
	}
}

label {
	display: block;
	margin-bottom: 0.2em;
	width: 100%;
}

ul {
	margin-bottom: 1em;
	padding-top: 1em;
	overflow: hidden;
}

li label {
	display: inline-block;
	vertical-align: top;
}

.js-errors {
	background: #f93337;
	border-radius: 4px;
	color: #FFF;
	font-size: .8em;
	list-style-type: square;
	margin-bottom: 1em;
	padding: 1em;
}

.js-errors {
	display: none;
}

.js-errors li {
	margin-left: 1em;
	margin-bottom: .5em;
	padding-left: 0;
}

ul.error input[type="checkbox"]+label::before,
ul.error input[type="radio"]+label::before {
	border-color: #F93337;
}

ul.error input[type="checkbox"]+label,
ul.error input[type="radio"]+label {
	color: #F93337;
}

li {
	float: left;
	width: 50%;

	&:first-of-type {
		margin-right: 2%;
		width: 48%;
	}

	@media screen and (max-width:460px) {
		width: 100%;

		&:first-of-type {
			margin-right: 0;
			width: 100%;
		}
	}
}

 

Add Javascript:

<script src = "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src = "https://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script>
	$(document).ready(function () {
		$("#form").validate({
			rules: {
				"checkbox[]": {
					required: true,
					minlength: 1
				}
			},
			highlight: function (element, errorClass, validClass) {
				$(element).addClass(errorClass).removeClass(validClass);

				$(element).closest('ul').addClass(errorClass);

			},
			unhighlight: function (element, errorClass, validClass) {
				$(element).removeClass(errorClass).addClass(validClass);

				$(element).closest('ul').removeClass(errorClass);

			},
			errorLabelContainer: ".js-errors",
			errorElement: "li",

			messages: {
				"checkbox[]": "Please select at least one checkbox"				
			},
		});
	});
</script>

Output:

how_to_validate_checkbox_in_jquery_output

 


You might also like:

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS