Tutorial JavaScript : Membuat Validasi Password Dengan JavaScript

Hari ini kegiatan saya diisi dengan acara berkeliling seputaran Banyuwangi kota, untuk menjual laptop Acer saya yang dulunya mati dan ternyata bangkit dari mati surinya (yang kemungkinan bakal mati lagi). Mungkin karena lagi apes, setiap toko komputer yang saya datangi tidak satupun yang mau menerima. Entah karena tampang saya yang mirip pencuri yang sedang menjual laptop hasil curiannya atau mungkin curiga dengan laptop saya yang bermasalah. Lantaran capek + mulai putus asa, saya kembali ke basecamp UKM untuk istirahat sebentar sambil mencari-cari yang mau membeli laptop usang saya ini via internet. Lagi asik-asiknya browsing, ada yang ngChat saya via YM dan bertanya tentang cara membuat validasi password dengan javascript. Hmmm…sebenarnya cara untuk melakukan validasi ini sangat mudah, tinggal memainkan fungsi selection menggunakan if. Berhubung saya lagi santai, maka saya buatkan tutorialnya. Kira-kira contoh source code jadinya seperti di bawah ini.

<script>
function cekPass()
{
	p1 = document.frm.pass1.value;
	p2 = document.frm.pass2.value;
	if(p1==p2)
	{
		document.frm.btn.disabled=false;
		document.frm.nama.disabled=false;
		document.frm.alamat.disabled=false;
		document.frm.tanggal.disabled=false;
	}
	else
	{
		document.frm.btn.disabled=true;
		document.frm.nama.disabled=true;
		document.frm.alamat.disabled=true;
		document.frm.tanggal.disabled=true;
	}
}
</script>
<fieldset>
<legend>Pendaftaran Member</legend>
<form name="frm" method="post">
<table>
<tr><td>Password </td><td>: <input type="password" name="pass1" onChange="cekPass();"></td></tr>
<tr><td>Ulangi Password </td><td>: <input type="password" name="pass2" onChange="cekPass();"></td></tr>
<tr><td>Nama </td><td>: <input type="text" name="nama" disabled="true"></td></tr>
<tr><td>Alamat </td><td>: <input type="text" name="alamat" disabled="true"></td></tr>
<tr><td>Tanggal </td><td>: <input type="text" name="tanggal" disabled="true"></td></tr>
<tr><td colspan=2><input type="submit" name="btn" disabled="true" value="Kirim Inputan"></td></tr>
</form>
</fieldset>

Gampang kan…??? Kalau bosan dengan javascript yang manual seperti di atas, bisa mencoba menggunakan plugin milik jQuery yang lebih variatif dan tentunya dengan efek-efek yang mantap. OK deh, sekian dulu postingan sederhana saya untuk kali ini, semoga bisa bermanfaat untuk rekan-rekan semuanya.

Happy Blogging and Keep Coding

Cheerrrss….!!!!