cara validasi checkbox di jquery

Cara Validasi Checkbox di jQuery

Leave a Comment / JavaScript / By

Pada artikel ini, kita akan belajar cara melakukan validasi pada checkbox dengan menggunakan jquery. Dalam form HTML, terkadang kita memiliki beberapa opsi pilihan untuk dicentang dan pada saat itu kita perlu memeriksa validasi untuk semua field.

Jadi, mari kita simak tutorial berikut ini untuk melihat bagaimana cara memvalidasi beberapa checkbox di jquery.

Pertama kita buat folder validasi_jquey dan di folder tersebut buat file dengan nama index.html. Buka file index.html di text editor kesukaan kalian. Kemudian kita tambahkan code berikut untuk membuat form yang berisi checkbox.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Cara Validasi Checkbox di jQuery - Leravio</title>
		<link href='https://fonts.googleapis.com/css?family=Dosis:600' rel='stylesheet' type='text/css'/>
                <link rel="stylesheet" type="text/css" href="main.css">
	</head>
	<body>
		<div class="wrap">
			<h2>Cara Validasi Checkbox di jQuery - Leravio</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>

Pada code diatas, kita membuat checkbox yang berisi bahasa pemrograman antara lain laravel, php, jquery, mysql, python, dan node.js. Nantinya kita akan melakukan validasi checkbox mana saja yang dicentang dengan menggunakan jquery.

Baca Juga

Cara Export Tabel HTML Ke Excel Menggunakan Javascript

Agar tampilan form kita terlihat lebih cantik, kita perlu membuat file main.css dan tempatkan di satu folder yang sama dengan file index.html. Selanjutnya, buka file main.css dan tambahkan code berikut.

*,
*: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%;
		}
	}
}

Setelah kita memberi style pada element html, langkah selanjutnya yaitu kita akan melakukan validasi dengan jquery. Caranya yaitu buka file index.html kembali dan tambahkan code berikut ini di atas tag </body>

<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",
			errorLabelContainer: "li",

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

Berikut penjelasan terkait code diatas:

  • Kita akan memakai cdn untuk menggunakan library jquery.
  • Selanjutnya, kita lakukan validasi pada id form antara lain.
    • rules: aturan yang harus dipatuhi pada form.
    • highlight: untuk menyorot checkbox yang dicentang.
    • unhighlight: untuk menhapus hasil sorotan checkbox jika tidak dicentang.
    • errorLabelContainer dan errorLabelContainer: menambahkan class .js-errors pada element li.
    • messages: memberikan pesan jika tidak ada checkbox yang dicentang satupun.

Selamat sekarang kita telah berhasil melakukan validasi pada checkbox dengan menggunakan jQuery. Jika ada pertanyaan, Anda bisa langsung tulis di kolom komentar di bawah ini.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top