Validasi Form dengan JQuery

Validasi form adalah suatu kegiatan untuk memeriksa suatu form apakah datanya telah diisi atau data sesuai dengan persyaratan yang ada. Validasi ini sangat berguna untuk meminimalisir kesalahan penginputan pada saat pengunjung mengisikan datanya. Jadi sebelum diinput data telah di cek terlebih dahulu.

Sesuai dengan pembahasan kali ini kita akan belajar bagimana cara validasi form dengan jquery. Validasi dengan jquery akan memberikan peringatan saat terjadi kesalahan pada saat itu juga. Sehingga pengunjung langsung tahu dimana letak kesalahanya tanpa harus menunggu halaman ter-load ulang terlebih dahulu.

Lalu bagaimana cara membuat validasi dengan jquery ?. Kalian bisa ikuti contoh code dibawah ini. Pertama buat file html terlebih dahulu seperti berikut.

<!DOCTYPE html>
<html>
<head>
	<title>Validasi Form</title>	
</head>
<body>
<form action="" method="post" class="form">
	Nama: <br>
	<input type="text" name="nama" id="nama"><br>
	Password : <br>
	<input type="password" name="password" id="pass"><br>
	<input type="submit" name="submit" id="submit">
</form>

</body>
</html>

Lalu buat script jquery seperti ini untuk fungsi validasinya.

$(document).ready(function(){
	   	$('#submit').click(function() {
			var nama = $('#nama').val().length;
			var pass = $('#pass').val().length;			
 
			if (nama == 0) {				
				alert("Teks nama kosong !");
			}
			if (pass == 0) {				
				alert("password kosong !");
			}
		});
	});

Dan jangan lupa untuk menyisipkan file jquery.js seperti ini.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

Tata letaknya harus diatas sebelum script jquery pada diatas ya.

Jika sudah kalian bisa simpan filenya dengan format html. Untuk melihat hasilnya kalian bisa buka file tersebut pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

ini adalah gambar pada saat form awal belum diisi. Kalian bisa coba isi salah satu formnya terlebih dahulu untuk melihat apakah akan muncul notif kesalahan jika salah satu textbox tidak diisi.

Seperti gambar diatas, jika terjadi kesalahan seperti lupa menginput, nantinya akan muncul alert notifikasi tentang kesalahan pengisian formnya. Seperti itu kira-kira penggunaanya, kalian bisa kembangkan lagi untuk validasi yang lebih kompleks sesuai kebutuhan website kalian.

Sekian pembahasan mengenai bagaimana cara validasi form dengan jquery. Semoga artikel kali bermanfaat bagi kalian semua, nantikan artikel menarik dan lebih seru di pertemuan berikutnya.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

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