Membuat Validasi Password Dengan Jquery

21 Jun 2015 23:04 • Post By

Assalamualaikum .. selamat sore teman-teman tutorialku :) , oke Mblo ..kita lanjut tutorial JQuery kita yak :p
pada kesempatan kali ini kita akan belajar membuat sebuah validasi pada password yang di input oleh user , misal nya gini , misal nya kan teman-teman memberikan fasilitas pendaftaran bagi user baru , nah tentunya teman-teman pasti memerintahkan untuk memasukkan password untuk akun user yang akan berhubungan dengan sistem yang teman-teman buat , nah maksud dari tutorial kita kali ini akan membuat validasi password yang di masukkan oleh user. dimana pertama nya user akan kita minta untuk memasukkan password dan kemudian akan kita minta lagi untuk memasukkan password nya sekali lagi ( ulang ). untuk mengecek password yang di input oleh user.
nah tujuan nya apa ?
jadi untuk tujuan nya adalah untuk memastikan user mengetik password yang benar sesuai kehendak user , dan menghindari kesalahan ketik oleh user saat mendaftar password nya .
kita mulai ya ?
apa-apa saja ni yang kita butuhkan untuk mulai belajar membuat validasi password dengan jquery ?
– file php (saya buat index.php)
– library jquery
pertama kita buat dulu tampilan dari form tempat si user mengetikkan password nya saat mendaftar .
index.php
<html>
	<head>
		<script src="jquery.js" type="text/javascript"></script>
			<style>
				h1{
				text-align:center;
				}
				body{
				font-family:sans-serif;
				}			
				#kotak{				
					width:600px;
					heigh:400px;
					margin:100px auto;
				}
				table tr td{
					min-width:170px;				
				}
				input{
					width:370px;
					height:40px;
					margin-top:10px;
					font-size:15pt;
					padding-left:10px;
				}	
				button{
					width:370px;
					height:40px;
				}				
			</style>		
	</head>
	<body>
	<h1>Membuat validasi password dengan jquery</h1>
	<h1>CariKode.com</h1>
		<div id="kotak">
		
			<form method="post" id="form-pass">
				<table>
					<tr>
						<td>Masukkan password</td>
						<td><input type="text" id="masuk" name="masuk"></td>
					</tr>
					<tr>
						<td>Ulangi password</td>
						<td><input type="text" id="masuk_lagi" name="masuk_lagi"></td>
					</tr>
					<tr>
						<td></td>
						<td><button>Oke</button></td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

nah coba kita jalankan pada browser
membuat validasi password dengan jquery
membuat validasi password dengan jquery
setelah selesai membuat tampilan dari form di atas , selanjut nya kita ngapain ?
kwkwkwkw
oke kita lanjut dengan membuat aksi dari form tersebut . saya ingin membuat validari pada form password ketika si user memasukkan password yang tidak sama pada saat mengulangi password maka form ulang  password akan berubah menjadi warna merah . dan ketika si user memasukkan password yang sama maka form ulanng password akan berubah menjadi hijau .
untuk mengecek password yang di ketik user perhatikan contoh yang saya buat berikut ini .
<script>
	$(document).ready(function(){
		$('#masuk_lagi').keyup(function(){
			var passpertama=$('#masuk').val();
			var passkedua=$('#masuk_lagi').val();
			if($('#masuk').val() != $('#masuk_lagi').val()){
			         $('#masuk_lagi').css('background','#e74c3c');
			}else if(passpertama == passkedua){
				$('#masuk_lagi').css('background','#2ecc71');
			}
		});				
	});	
</script>
bisa ketikkan dalam tag head
sekarang akan kita tes dulu pada browser
jika user mengetikkan password yang tidak sama maka form password akan berubah menjadi merah
password yang di masukkan tidak sama
password yang di masukkan tidak sama
jika user mengetikkan password yang sama maka form password akan berubah menjadi hijau.
password yang di masukkan sama
password yang di masukkan sama
coba teman-teman perhatikan pada contoh di atas , saat si user mengetik password yang tidak sama maka form akan berubah menjadi merah, dan jika password yang di ketik sama maka form berubah menjadi hijau .
untuk penjelasan nya coba teman-teman perhatikan pada syntax jquery nya
<script>
	$(document).ready(function(){
		$('#masuk_lagi').keyup(function(){
		var passpertama=$('#masuk').val();
		var passkedua=$('#masuk_lagi').val();
	        if($('#masuk').val() != $('#masuk_lagi').val()){
		         $('#masuk_lagi').css('background','#e74c3c');
		}else if(passpertama == passkedua){
			$('#masuk_lagi').css('background','#2ecc71');
		}
	  });				
	});		
</script>
form password yang pertama saya beri id masuk , dan password kedua atau ulang password saya beri id masuk_lagi . kemudian masing-masing id form password ini saya ambil nilai value nya dan saya buat masukkan ke variabel , untuk lebih mudah kita cocokkan nilai dari kedua value tersebut .
kemudian kita melakukan percabangan jika value dari password yang pertama tidak sama dengan value password kedua maka form password kedua(id= masuk_lagi) akan di ubah menjadi merah , dan jika value dari password pertama sama dengan pasword kedua maka form ulang password di ubah menjadi hijau ,, hehehe mudah kan ? kita hanya tinggal membolak-balikkan logika kita dengan sedikit bekal pengetahuan tentang jquery yang sudah kita pelajari dari tutorial jquery sebelum nya ..
sekian Tutorial JQuery : Membuat validasi password dengan JQuery . semoga dapat bermanfaat bagi teman-teman yang sedang mencari pengetahuan tentang jquery :)
update terus tutorial jquery lainnya di tutorialku.net
oh ya, teman-teman bisa mengembangkan nya lagi sesuai kebutuhan sistem yang teman-teman buat , dan atribut pada element input bisa di ubah dengan type=”password” . karena pada tutorial ini saya hanya menjelaskan cara pembuatan validasi password dengan jquery .
keep sharing !!

Jangan lupa Subscribe ya !!

Membuat Validasi Password Dengan Jquery | Tutorialku.Net | 4.5