0
0
Tutorial kali ini iniilmu akan memberikan script Cara Membuat Validasi Form Dua Tanggal Dengan Javascript.
Membuat validasi pada form merupakan hal yang sangat penting dilakukan agar user tidak salah dalam menginputkan sebuah data atau nilai.
Disini iniilmu akan memberikan cara validasi dari dua form tanggal agar user tidak salah dalam memasukan sebuah nilai.
Langsung simak langkah-langkah berikut:
Langkah Pertama
Buat dua buah form tanggal, seprti gambar dibawah ini:
Untuk membuat form di atas mari ikuti soure code dibawah ini:
<div class="row">
<div class="col-sm-6">
<!-- text input -->
<div class="form-group">
<label>Dari Tanggal</label>
<input type="date" value="<?php echo date('Y-m-d') ?>" class="form-control" id="tgl_awal" name="tgl_awal">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Sampai Tanggal</label>
<input type="date" class="form-control" value="<?php echo date('Y-m-d') ?>" id="tgl_akhir" name="tgl_akhir">
</div>
</div>
</div>Langkah Kedua
Membuat script javascript untuk memvalidasi dua bauh form tanggal tersebut, ikuti script dibawah ini:
<script>
function validasi_dua_tanggal() {
var tgl_awal = document.getElementById("tgl_awal").value;
var tgl_akhir = document.getElementById("tgl_akhir").value;
if (tgl_akhir < tgl_awal) {
alert("Tanggal Akhir Tidak Boleh Kurang Dari Tanggal Awal")
}
}
</script>Hal yang perlu diperhatikan (yang bercetak tebal) adalah document.getElementById(“tgl_awal“).value dan document.getElementById(“tgl_akhir“).value, merupakan id dari masing-masin form tanggal.
Langkah Ketiga
Kita akan membuat sedikit perubahan pada source code form tanggal kedua, seprti code dibawah ini:
<input type="date" class="form-control" value="<?php echo date('Y-m-d') ?>" id="tgl_akhir" name="tgl_akhir" onblur="validasi_dua_tanggal()">Pada Form Sampai Tanggal kita akan memanggil fungsi javascript yang kita buat pada langkah kedua tadi, caranya dengan menambahkan onblur=”validasi_dua_tanggal()” pada form tersebut.
Nah, sekarang mari kita coba!!
Pada form sampai tanggal saya menginputkan nilai yang lebih kecil dari pada form dari tanggal, sehingga akan muncul alrt seprti gambar dibawah ini:
Sekian dan terimakasih
Silahkan
