Waktu itu gua pernah buat tutorial cara menggunakan jquery validation dengan bootstrap 4. Kali ini, gua mau sharing lagi tutorial penggunaan jquery validation. Gua mau coba sharing bagaimana cara validasi input rentang tanggal supaya tanggal akhir tidak boleh lebih kecil dari tanggal awal. Kira kira, berikut capture hasilnya
![Jquery Validation Range Date [docs/kuhomi.id].](http://manage.kuhomi.id/assets/img/gallery/1715931666727.png)
Kodingan validasi rentang tanggal ini sedikit berbeda dengan kodingan validasi input biasa, karena kita akan membuat custom method.
Oke, langsung aja ini kodingannya. Untuk penjelasan program, gua sertakan di kode dalam bentuk komentar aja yaaa…
1. Load script dan css yang dibutuhkan terlebih dahulu pada tag header
<head>
<title>Tutorial Pakai Jquery Validation: Validasi Rentang Tanggal</title>
<!-- Get Bootstrap CDN in https://www.bootstrapcdn.com/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- load script package jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- load jquery validation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- load script package bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</head>
2. Buat form yang mau di validasi. Form ini hanya sebagai contoh ya. Nanti harus disesuaikan lagi dengan form yang ingin dibuat
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="dari_tanggal">Dari Tanggal</label>
<input type="text" class="form-control" id="dari_tanggal" name="dari_tanggal" placeholder="Dari Tanggal">
</div>
<div class="form-group col-md-6">
<label for="sampai_tanggal">Sampai Tanggal</label>
<input type="text" class="form-control" id="sampai_tanggal" name="sampai_tanggal" placeholder="Sampai Tanggal">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
3. Selanjutnya, kita buat script jquery untuk proses validasi form
<script>
$(document).ready(function(){
//inisialisasi datepicker id dari_tanggal
$(function () {
$("#dari_tanggal").datepicker();
});
//inisialisasi datepicker id sampai_tanggal
$(function () {
$("#sampai_tanggal").datepicker();
});
//custom method jquery validation untuk cek tanggal akhir
//apakah lebih besar dari tanggal awal
$.validator.addMethod("greaterThan", function(value, element, params) {
if (!/Invalid|NaN/.test(new Date(value))) {
return new Date(value) > new Date($(params).val());
}
return isNaN(value) && isNaN($(params).val())
|| (Number(value) > Number($(params).val()));
},'Tanggal akhir harus lebih besar dari tanggal awal.');
//Inisialisasi proses validasi
$("form").validate({
ignore: [],
//deklarasikan rules yang ingin di validasi
//untuk rules selengkapnya bisa dicek di dokumentasi jquery validation ya
rules: {
//artinya field dengan attr name=dari_tanggal wajib diisi
dari_tanggal: {
required: true
},
//artinya field dengan attr name=sampai_tanggal wajib diisi
//dan sampai_tanggal valuenya tidak boleh lebih kecil dari dari_tanggal
sampai_tanggal: {
required: true,
greaterThan: "#dari_tanggal"
}
},
//deklarasi pesan atau alert yang muncul pas value pada field form tidak sesuai rules
messages:{
dari_tanggal: {
required: "Tanggal awal wajib diisi"
},
sampai_tanggal: {
required: "Tanggal akhir wajib diisi",
greaterThan: "Tanggal akhir harus lebih besar dari tanggal awal"
}
},
errorElement: "div",
errorPlacement: function ( error, element ) {
// Menyisipkan class invalid-feedback di element error
error.addClass( "invalid-feedback" );
if ( element.prop( "type" ) === "checkbox" ) {
error.insertAfter( element.parent( "label" ) );
} else {
error.insertAfter( element );
}
},
//menyisipkan class is-invalid pada element form yang valuenya error
highlight: function ( element, errorClass, validClass ) {
$( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
},
//menyisipkan class is-valid pada element form yang valuenya sudah benar
unhighlight: function (element, errorClass, validClass) {
$( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
}
});
});
</script>
4. Dan ini adalah full code nya
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Pakai Jquery Validation: Validasi Rentang Tanggal</title>
<!-- Get Bootstrap CDN in https://www.bootstrapcdn.com/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- load script package jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- load jquery validation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- load script package bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="dari_tanggal">Dari Tanggal</label>
<input type="text" class="form-control" id="dari_tanggal" name="dari_tanggal" placeholder="Dari Tanggal">
</div>
<div class="form-group col-md-6">
<label for="sampai_tanggal">Sampai Tanggal</label>
<input type="text" class="form-control" id="sampai_tanggal" name="sampai_tanggal" placeholder="Sampai Tanggal">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function(){
//inisialisasi datepicker id dari_tanggal
$(function () {
$("#dari_tanggal").datepicker();
});
//inisialisasi datepicker id sampai_tanggal
$(function () {
$("#sampai_tanggal").datepicker();
});
//custom method jquery validation untuk cek tanggal akhir
//apakah lebih besar dari tanggal awal
$.validator.addMethod("greaterThan", function(value, element, params) {
if (!/Invalid|NaN/.test(new Date(value))) {
return new Date(value) > new Date($(params).val());
}
return isNaN(value) && isNaN($(params).val())
|| (Number(value) > Number($(params).val()));
},'Tanggal akhir harus lebih besar dari tanggal awal.');
//Inisialisasi proses validasi
$("form").validate({
ignore: [],
//deklarasikan rules yang ingin di validasi
//untuk rules selengkapnya bisa dicek di dokumentasi jquery validation ya
rules: {
//artinya field dengan attr name=dari_tanggal wajib diisi
dari_tanggal: {
required: true
},
//artinya field dengan attr name=sampai_tanggal wajib diisi
//dan sampai_tanggal valuenya tidak boleh lebih kecil dari dari_tanggal
sampai_tanggal: {
required: true,
greaterThan: "#dari_tanggal"
}
},
//deklarasi pesan atau alert yang muncul pas value pada field form tidak sesuai rules
messages:{
dari_tanggal: {
required: "Tanggal awal wajib diisi"
},
sampai_tanggal: {
required: "Tanggal akhir wajib diisi",
greaterThan: "Tanggal akhir harus lebih besar dari tanggal awal"
}
},
errorElement: "div",
errorPlacement: function ( error, element ) {
// Menyisipkan class invalid-feedback di element error
error.addClass( "invalid-feedback" );
if ( element.prop( "type" ) === "checkbox" ) {
error.insertAfter( element.parent( "label" ) );
} else {
error.insertAfter( element );
}
},
//menyisipkan class is-invalid pada element form yang valuenya error
highlight: function ( element, errorClass, validClass ) {
$( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
},
//menyisipkan class is-valid pada element form yang valuenya sudah benar
unhighlight: function (element, errorClass, validClass) {
$( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
}
});
});
</script>
</body>
</html>
