Assalamualaikum gan... Kali ini saya akan memberikan sedikit tutorial sederhana yaitu Membuat Validasi Form Sederhana Dengan JavaScript. Mungkin ada yang belum tau tentang Validasi Form dan saya akan menjelaskan secara singkat saja, Validasi Form adalah proses dimana inputan dari user dicek jika data yang masuk ke sistem/database sesuai permintaan maka proses akan dilanjutkan, namun jika gagal maka akan muncul Alert, misal ada data yang tidak diisi contohkan saja Nama, jika nama tidak diinput maka otomatis JS akan memberikan Alert bahwa nama tidak boleh kosong..
Baiklah itu sedikit penjelasan saja, saya akan mencontohkan Validasi Form Sederhana Menggunakan fungsi Alert jika Username/Password kosong, Langsung saja ke studi kasusnya...
Pertama saya contohkan saja pada Form Login, Berikut Ini Script JS bserserta HTML nya..
<script type="text/javascript">
function validasi(form){
if(form.username.value ==''){
alert("Username Isi Dulu Boyzz");
form.username.focus();
return(false);
}
if(form.password.value ==''){
alert("Password Isi Dulu Boyzz");
form.password.focus();
return(false);
}
return(true);
}
</script>
<form name="form1" method="post" action="" onsubmit="return validasi(this)">
<p> </p>
<p> </p>
<table width="700" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td align="center"><img src="img/img.jpg" width="420" height="164"></td>
</tr>
</table>
<hr width="700" />
<table width="289" border="0" align="center" cellpadding="3" cellspacing="2">
<tr>
<td width="85">Username</td>
<td width="33">:</td>
<td width="153"><input type="text" name="username" value=""></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="password" value=""></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" value="Login"> <input type="reset" value="Reset"></td>
</tr>
</table>
<hr width="700" />
<table width="700" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td align="right" style="padding-right:10px;"><p style="font-style:italic; color:#000; cursor:pointer;">Created By Rivai</p></td>
</tr>
</table>
</form>Kemudian Save File diatas Berikan nama terserah kalian, saya contohkan namanya "validasi.html", kemudian coba jalankan file yang sudah di Save tadi, Jalankan Melalui Browser Seperti Mozila,dsb.
Coba Kosongkan Inputan misalnya Username Maka akan tampil seperti gambar dibawah ini
Dan coba juga Kosongkan Inputan Password Maka Akan tampil seperti gambar dibawah ini
Ok, cukup dulu preview nya, saya akan menjelaskan sedikit fungsi dari Script Javascript Diatas
Pertama Adalah Code
function validasi(form)ini adalah kode untuk membuat Function dengan nama saya contohkan saja validasi jika ingin diganti juga silahkan dan argumen nya saya isikan form
Kedua adalah Code
if(form.username.value ==''){
alert("Username Isi Dulu Boyzz");
form.username.focus();
return(false);
}
if(form.password.value ==''){
alert("Password Isi Dulu Boyzz");
form.password.focus();
return(false);
}Ini adalah kode kondisi untuk mengecek apakah Nilai dari Inputan Password/Username apabila nilainya kosong maka akan muncul Alert.. Nilai kosong dapat dilihat dari Code diatas dengan tanda form.username.value ==' ' yang saya garis bawahi adalah nilai argumen dari Function diatas, untuk == ' ' dapat dibaca sama dengan kosong, sedangkan alert("Password Isi Dulu Boyzz"); untuk menampilkan alert jika Username/Password kosong, sedangkan form.username.focus(); untuk mengarahkan kursor ke inputan yang kosong tadi secara otomatis jadi tidak perlu mengarahkan kursor lagi, dan return(false); adalah untuk mengembalikan nilai False/Gagal pada saat disubmit
return(true);Sama seperti diatas fungsi dari Return adalah untuk mengembalikan nilai namun kali ini nilai yang dikembalikan secara true/benar karena kondisi if diatas tidak terpenuhi (inputan tidak ada yang kosong) jadi otomatis form inputan ada isinya jadi dipakailah return(true)
lalu pada HTML ada fungsi dibagian tag Form onsubmit="return validasi(this) yang berfungsi untuk mengembalikan yang ada dari Function diatas dan this adalah untuk mengakses seluruh method atau objek pada function/object diatas.
Maaf jika ada kata kata yang agak membingungkan, maklum masi pemula dalam hal menulis, saya harap postingan ini dapat memberi manfaat, dan jika ada yang perlu ditanyakan silahkan saja......
EmoticonEmoticon