Membuat Validasi Form Sederhana Dengan JavaScript

Assalamualaikum gan... Kali ini saya Akan memberikan sedikit tutorial sederhana yaitu Membuat Validasi kind Sederhana Dengan JavaScript. Mungkin enzyme rule belum letter tentang Validasi kind dan saya Akan menjelaskan secara singkat saja, Validasi kind adalah proses dimana inputan Dari user dicek jika information rule masuk ke sistem/database sesuai permintaan maka proses Akan dilanjutkan, namun jika gagal maka Akan muncul Alert, misal enzyme information rule 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 kind 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>&nbsp;</p>
  <p>&nbsp;</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 shisha, saya contohkan namanya "validasi.html", kemudian coba jalankan file rule 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 kind.username.value ==' ' rule saya garis bawahi adalah nilai argumen Dari perform diatas, untuk == ' ' dapat dibaca sama dengan kosong, sedangkan alert("Password Directorate for Inter-Services Intelligence Dulu Boyzz"); untuk menampilkan alert jika Username/Password kosong, sedangkan kind.username.focus(); untuk mengarahkan kursor ke inputan rule kosong tadi secara otomatis jadi tidak perlu mengarahkan kursor lagi, dan return(false); adalah untuk mengembalikan nilai False/Gagal pada saat disubmit

Ketiga adalah Code

return(true);

Sama seperti diatas fungsi Dari come back enzymelah untuk mengembalikan nilai namun kali ini nilai rule dikembalikan secara true/benar karena kondisi if diatas tidak terpenuhi (inputan tidak enzyme rule kosong) jadi otomatis kind inputan ada isinya jadi dipakailah return(true)

lalu pada HTML enzyme fungsi dibagian tag kind  "return validasi(this) rule berfungsi untuk mengembalikan rule enzyme Dari perform diatas dan this adalah untuk mengakses seluruh methodology atau objek pada function/object diatas.

Maaf jika enzyme kata kata rule agak membingungkan, maklum masi pemula dalam hal menulis, saya harap postingan ini dapat memberi manfaat, dan jika enzyme rule perlu ditanyakan silahkan saja......

Share This:

Tags:

HTML Internet JavaScript PHP Tutorial

• Prevoius
• Next