Tutorial kali ini saya akan membahas tentang validasi form sederhana menggunakan javascript.
Form merupakan tempat anda mengisi data-data yang kelak akan anda gunakan untuk masuk ke dalam suatu sistem atau website. Form bisa meminta anda memasukkan data seperti nama, alamat, no telepon, password atau gambar. Disini gw akan membahas cara melakukan validasi untuk username dan password secara client side yakni menggunakan bantuan library jquery. Cara untuk menggunakannya sangat simple dan mudah dipahami untuk orang yang pertama kali mempelajari jquery. Berikut kodingnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Validasi Form</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#username").keyup(function(){
var username = $("#username").val();
var jumlahkarakter = username.length;
if(jumlahkarakter < 6){
$("#userconfirm").html("<span style='color:red'>Jumlah karakter username anda tidak mencukupi</span>");
}
else if(jumlahkarakter > 24){
$("#userconfirm").html("<span style='color:red'>Jumlah karakter username anda terlalu banyak</span>");
}
else{
if(username.match(/[^a-zA-Z0-9]/i))
$("#userconfirm").html("<span style='color:red'>Anda memasukkan karakter yang tidak diijinkan</span>");
else
$("#userconfirm").html("<span style='color:green'>Jumlah karakter telah memadai</span>");
}
});
$("#password1").keyup(function(){
var password = $("#password1").val();
var jumlahkarakter = password.length;
if(jumlahkarakter < 8){
$("#passwordconfirm1").html("<span style='color:red'>Password anda terlalu pendek</span>");
}
else{
$("#passwordconfirm1").html("<span style='color:green'>Password anda telah memenuhi standard</span>");
}
});
$("#password2").blur(function(){
var password1 = $("#password1").val();
var password2 = $("#password2").val();
if(password2 != password1){
$("#passwordconfirm2").html("<span style='color:red'>Password yang anda masukkan tidak cocok</span>");
$("#password2").val('');
}
else{
$("#passwordconfirm2").html("<span style='color:green'>Password yang anda masukkan cocok</span>");
}
});
$('form').submit(function(e){
var username = $("#username").val();
var password1 = $("#password1").val();
var password2 = $("#password2").val();
if(username == '' || password1 == '' || password2 == ''){
alert("Anda harus mengisi field yang tersedia");
e.preventDefault();
}
});
});
</script>
</head>
<body>
<h1> Register User </h1>
<table>
<form>
<tr>
<td><label for="username">Username</label></td>
<td>:</td>
<td><input type="text" id="username"></td>
<td><label id="userconfirm"></label></td>
</tr>
<tr>
<td><label for="password1">Password</label></td>
<td>:</td>
<td><input type="password" id="password1"></td>
<td><label id="passwordconfirm1"></label></td>
</tr>
<tr>
<td><label for="password2">Confirm Password</label></td>
<td>:</td>
<td><input type="password" id="password2"></td>
<td><label id="passwordconfirm2"></label></td>
</tr>
<td><input type="submit" value="submit"></td>
</form>
</table>
</body>
</html>
Berikut sedikit penjelasan untuk koding diatas :
Ketika anda mengetikan username maka secara otomatis akan memanggil jquery untuk melakukan validasi. Untuk username, gw menggunakan validasi apabila jumlah karakter yang digunakan kurang dari 6 maka akan muncul notifikasi bahwa user harus mengisi username yang lebih panjang. Sedangkan jika jumlahnya lebih dari 24 karakter user akan diberikan notifikasi bahwa jumlah karakter terlalu banyak, nanti bisa lupa sama username sendiri hehe. Nah kalau berada diantara 6 sampai 24 karakter maka akan divalidasi lagi apakah memiliki spesial karakter atau tidak dengan menggunakan regular expression. Jika memiliki spesial karakter maka akan diberikan notifikasi bahwa hanya tidak boleh menggunakan spesial karakter.
Nah untuk yang password cara kerjanya hampir sama dengan username. Kalau yang confirm password agak sedikit berbeda dengan password dan username karena baru akan dicek setelah user keluar dari form input (onblur). Jika password tidak sama dengan yang ditulis sebelumnya maka akan diberikan notifikasi bahwa password tidak cocok.
Terakhir adalah ketika user menekan tombol submit dan user belum mengisi satu pun atau masih ada form input yang belum diisi maka secara otomatis akan muncul alert yang memberitahukan bahwa masih ada form input yang masih kosong. Jika semua sudah terisi maka selamat anda telah berhasil menginput.
Demikian sedikit tutorial validasi sederhana dari gw, dan sebenarnya itu masih bisa dikembangkan lagi karena memang itu terlalu sederhana. Ya kalau mau dikembangkan lagi gih monggo. Makin bagus malah hehe. Oke selamat malam. Salam Super hehe
Tidak ada komentar:
Posting Komentar
Jika anda Berminat, Silahkan Tinggalkan Komentar