Iso Web Id Tutorial Komputer
Related Articles
Bagi yang terbiasa menggunakan javascript sebagai client site sudah sering berhubungan dengan yang namanya Callback, Callback itu apa sih? yaitu fungsi yang dipanggil setelah sebuah fungsi dieksekusi, biasanya terdapat parameter yang dikirimkan pada fungsi Callback ini. Kita akan membuat fungsi sederhana untuk memfilter inputan pada form registrasi, fungsi ini dapat kalian terapkan juga pada project yang kalian buat.
Pada fungsi Callback ini akan menerima respon dari fungsi utama yaitu berupa object value hasil dari registrasi member, mari kita buat skenario penggunaan fungsi callback pada artikel kali ini
1. Member mengisi form Registrasi.
2. Member mengeksekusi dengan klik tombol Submit (menjalankan fungsi regMember).
3. Pada fungsi regMember akan menangkap isi dari form registrasi sekaligus memanggil fungsi callback untuk memfilter aturan pengisian Form.
4. Pada fungsi Callback akan mengembalikan semua object yang dikiriman dari fungsi regMember.
5. Fungsi Callback menghitung bisa object yag dikirim, bila lebih dari 0 akan menampilkan pesan.
Berikut susunan codenya.
<html>
<head>
<title>Javascript callback</title>
</head>
<body>
<form action=”” method=”post” id=”frm_register”>
<table cellpadding=”1″ cellspacing=”2″>
<tbody>
<tr>
<td>Username</td>
<td>:</td>
<td><input type=”text” name=”username” id=”username” /></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type=”password” name=”password” id=”password” /></td>
</tr>
<tr>
<td>Konfirmasi password</td>
<td>:</td>
<td><input type=”password” name=”cpassword” id=”cpassword” /></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type=”text” name=”email” id=”email” /></td>
</tr>
<tr>
<td colspan=”3″>
<input type=”button” name=”submit” id=”submit” value=”Kirim” onclick=”regMember();” />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Diatas adalah kode HTML untuk registrasi, untuk kode javascriptnya sebagai berikut :
<script type=”text/javascript”>
function cekMail(mail){ // cek email validasi
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
return filter.test(mail);
}
function cekInput(arrForm, callback){
if(arrForm[‘username’] != “”){ // cek username kosong atau tidak
if(arrForm[‘username’].length >= 5){ // cek total karakter username tidak boleh kurang dari 5
if(arrForm[‘password’] != “”){ // password tidak boleh kosong
if(arrForm[‘password’].length >= 6){ // cek total karakter password tidak boleh kurang dari 6
if(arrForm[‘password’] == arrForm[‘cpassword’]){ // cek password dan konfirmasi password harus sama
if(arrForm[‘email’] != “” && cekMail(arrForm[‘email’]) == true){ // email tidak boleh kosong dan cek validasi email
if (typeof(callback) == “function”) { // cek apakah callback bertype function
callback(arrForm); // panggil fungsi callback
}
}else{
alert(“Email tidak boleh kosong atau Email tidak Valid.”);
}
}else{
alert(“Password tidak sama.”);
}
}else{
alert(“Password minimal 6 karakter”);
}
}else{
alert(“Password tidak boleh kosong”);
}
}else{
alert(“Username minimal 5 Karakter”);
}
}else{
alert(“Username tidak boleh kosong”);
}
return false;
}
function regMember(){
var obj = new Object(); // buat variabel object
var uname = document.getElementById(“username”).value;
var pass = document.getElementById(“password”).value;
var cpass = document.getElementById(“cpassword”).value;
var email = document.getElementById(“email”).value;
obj.username = uname;
obj.password = pass;
obj.cpassword = cpass;
obj.email = email;
cekInput(obj, function(data){ // panggil fungsi cekInput
if(Object.keys(data).length > 0){ // respon dari callback berupa object data
alert(“validasi berhasil”);
}
});
}
</script>
Saya menggunakan Native javascript untuk script diatas untuk penerapan pada framework seperti jQuery atau yang lain atau anda ingin menggunakan nodeJS tidak jauh berbeda penerapannya jadi tidak perlu pusing untuk belajar lagi bila ingin menerapkannya pada framework javascript.
Semoga bermanfaat
