Seringkali kita dalam membuat sebuah program website membutuhkan sebuah inputan kedalam database yang berfungsi untuk di tampilkan (misal di website dinamis) maupun untuk fungsi validasi (misal login pada sebuah halaman website).
Salah satu contoh inputan yang penting dalam fungsi sebuah website dinamis adalah password. Nah, pada suatu kasus saat kita akan mengganti sebuah informasi kita pada website tersebut kita di minta untuk memasukkan password kita kembali untuk memvalidasi apakah yang mengganti informasi ini adalah asli Anda sendiri ataukah ada orang lain yang sengaja ingin mengganti informasi pribadi Anda (dalam konteks negatif, semisal akun Anda di hack).
Ada kalanya saat kita di minta memasukkan password tadi, kita disuruh mengulang untuk menulis lagi password yang sudah kita tulis sebelumnya untuk mengkonfirmasi apakah sudah benar atau belum. Misal password kita 123456, maka di form konfirmasi password juga di isi 123456 untuk menunjukkan bila password kita sudah benar, bila di form ke dua salah, maka akan memunculkan warning. Bagaimana cara membuatnya?
Pertama, kita buat dulu form nya.
<input type="password" id="pw1" placeholder="Password"/>
<input type="password" id="pw2" placeholder="Konfirmasi Password"/>
Sekarang, javascript nya.
<script type="text/javascript">
window.onload = function () {
document.getElementById("pw1").onchange = validatePassword;
document.getElementById("pw2").onchange = validatePassword;
}
function validatePassword(){
var pass2=document.getElementById("pw2").value;
var pass1=document.getElementById("pw1").value;
if(pass1!=pass2)
document.getElementById("pw2").setCustomValidity("Passwords Tidak Sama, Coba Lagi");
else
document.getElementById("pw2").setCustomValidity('');
}
</script>
Untuk full code nya seperti ini gambaran nya
<!DOCTYPE html>
<html>
<head>
<title>Validasi</title>
</head>
<body>
<form action="" method="post">
<input type="password" id="pw1" placeholder="Password"/>
<input type="password" id="pw2" placeholder="Konfirmasi Password"/>
<input type="submit" value="Cek">
</form>
<script type="text/javascript">
window.onload = function () {
document.getElementById("pw1").onchange = validatePassword;
document.getElementById("pw2").onchange = validatePassword;
}
function validatePassword(){
var pass2=document.getElementById("pw2").value;
var pass1=document.getElementById("pw1").value;
if(pass1!=pass2)
document.getElementById("pw2").setCustomValidity("Passwords Tidak Sama, Coba Lagi");
else
document.getElementById("pw2").setCustomValidity('');
}
</script>
</body>
</html>
1 komentar:
Write komentarAlhamdulillah ... validasi kayak gini yang dicari
Reply... terima kasih artikelnllya
EmoticonEmoticon