0 0
Read Time:1 Minute, 57 Second

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:

Dua Form Tanggal

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!!

Cara Membuat Validasi Dua Form Tanggal

Pada form sampai tanggal saya menginputkan nilai yang lebih kecil dari pada form dari tanggal, sehingga akan muncul alrt seprti gambar dibawah ini:

Alert Validasi

Sekian dan terimakasih

Silahkan

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published.