Membuat Konfirmasi Password dengan Jquery

Form pada suatu website sangat erat kaitanya dengan data diri pengunjung. Dengan adanya form dapat memberitahu pemilik website data pribadi pengunjung yang telah mengisinya. Salah satu contoh form yang sering digunakan adalah form login. Form login ini bertujuan untuk mengetahui siapa yang login pada website kita. Form login ini biasanya terdiri dari textbox untuk username atau email dan yang kedua adalah passwordnya. Untuk membuat username dan password untuk login, tentun kita harus register terlebih dahulu agar data diri kita telah terdaftar. Salah satu yang ada pada form register adalah pengisian ulang password untuk mengecek apakah passwordnya sama.

Sesuai dengan pembahasan kali ini kita akan belajar bagaimana cara membuat konfirmasi password dengan jquery. Dengan bantuan Jquery kita akan memunculkan notifikasi pesan eror pada halaman form apabila penginputanya terjadi kesalahan. Lalu bagaimana cara membuatnya? mari ikuti langkah berikut ini. Pertama kalian bisa salin contoh code dibawah ini.

<!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>
	Ulangi Password : <br>
	<input type="password" name="password" id="pass2"><br><br>
	<input type="submit" name="submit" id="submit" value="Login">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
	   	$('#submit').click(function() {
			var pass = $('#pass').val();
			var pass2 = $('#pass2').val();						
			if (pass != pass2) {				
				alert("password tidak sama!");
			}
		});
	});
</script>
</body>
</html>

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

membuat-konfirmasi-password-dengan-jquery-rangga1-190617

Tampilan diatas adalah tampilan awal, kalian coba isikan username dan passwordnya.

membuat-konfirmasi-password-dengan-jquery-rangga2-190617

Lalu pada kolom dibawah password adalah kolom untuk memeriksa password, jadi kalian isi sesuai dengan password yang sudah diisi sebelumnya. Jika pengisianya tidak sama maka akan muncul pesan seperti ini.

membuat-konfirmasi-password-dengan-jquery-rangga3-190617 membuat-konfirmasi-password-dengan-jquery-rangga4-190617

Kalian bisa kembangkan lagi fungsi konfirmasi ini dengan kasus yang lebih kompleks lagi sesuai kebutuhan website kalian. Mudah bukan ?.

Sekian pembahasan mengenai bagaimana cara membuat konfirmasi password dengan Jquery. Semoga artikel kali ini bermanfaat.

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 *