Tutorial Validasi Form dengan Javascript

Ada dua tipe validasi form, validasi client side dan validasi server side. Validasi server side telah dibahas di tutorial Validasi Form Dengan PHP. Validasi client side menggunakan javascript akan dijelaskan di tutorial ini. Di tutorial sebelumnya “Validasi Form dengan PHP” sudah disebutkan alasan validasi client side tidak dianjurkan. Namun validasi client side membuat website lebih user friendly. User dapat langsung mengetahui jika ada kesalahan pada input data, tanpa harus menunggu load halaman php untuk validasi form. Artinya website tidak perlu menload halaman yang sama berkali kali saat tejadi kesalahan input data. Bisa juga dikatakan proses input data akan menjadi lebih cepat.

Perlu diingat jika menggunakan validasi client side, data masih perlu divalidasi menggunakan validasi server side untuk memastikan kebenaran data.

Validasi Form dengan Javascript

Untuk mengikuti tutorial ini anda diharapkan memiliki pengetahuan tetang javascript dasar. Untuk mem-validasi sebuah form, agar tidak ada data yang kosong maka bisa digunakan script di bawah:

<form name="form1" id="form1" action="" method="post" />  

<dl>  

<dt>First Name</dt>



<dd><input name="firstName" id="firstName" type="text" /></dd>


<dt>Last Name</dt>


<dd><input name="lastName" id="lastName" type="text" /></dd>


<dt>Email</dt>


<dd><input name="email" id="email" type="text" /></dd>


<dt>Phone</dt>


<dd><input name="phone" id="phone" type="text" /></dd>


<dt></dt>


<dd><input type="button" name="save" id="save" value="Save" onclick="saveForm(); return false;" /></dd>


    </dl>

  
    </form>

      
    <script type="text/javascript">  
      function saveForm(){  
        if(document.getElementById('firstName').value == ''){  
          alert('First Name tidak boleh kosong');  
          document.getElementById('firstName').focus();  
          return false;  
        }  
        if(document.getElementById('lastName').value == ''){  
          alert('Last Name tidak boleh kosong');  
          document.getElementById('lastName').focus();  
          return false;  
        }  
        if(document.getElementById('email').value == ''){  
          alert('Email tidak boleh kosong');  
          document.getElementById('email').focus();  
          return false;  
        }  
        if(document.getElementById('phone').value == ''){  
          alert('Phone tidak boleh kosong');  
          document.getElementById('phone').focus();  
          return false;  
        }  
        document.getElementById('form1').submit();  
      }  
    </script>  

Dari baris 1 sampai baris 14 adalah untuk membuat html form. Kemudian di baris16 ditambahkan tag html

"<script>"

. Pada line selanjutnya membuat function saveForm() untuk melakukan validasi. Function saveForm() akan dipanggil pada saat user mengklik tombol save. Sehingga di baris 12 pada button save ditambakan attribute onlick=”saveForm(); return false;”. Di baris 18 anda akan melihat

"if(document.getElementById('firstName').value == '')"

, baris ini berarti mengambil nilai yang diinputkan pada element dengan id=”firstName” dan mengeceknya apakah kosong atau tidak. Jika kosong maka akan ditampilkan alert message (baris 19). Di baris 20 artinya memindahkan focus kursor ke element dengan id=”firstName”.

Javascript juga bisa digunakan untuk memvalidasi hal hal yang lain seperti berikut.
Validasi Email dengan Javascript

    function validasiEmail(email){  
      var validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; //regex untuk cek email  
      if(validEmail.test(email)){  
        return true;  
      }  
      return false;  
    }  
    alert(validasiEmail('email@example.com')); //hasil true  
    alert(validasiEmail('bukanemail')); //hasil false  

Validasi Kode Pos dengan Javascript

    function validasiPostalKode(postalCode){  
      var validPostalCode = /^\d{5}([\-]\d{4})?$/; //regex untuk cek kode pos  
      if(validPostalCode.test(postalCode)){  
        return true;  
      }  
      return false;  
    }  
    alert(validasiPostalKode('80361')); //hasil true  
    alert(validasiPostalKode('80361-1234')); //hasil true  
    alert(validasiPostalKode('salah')); //hasil false  
    alert(validasiPostalKode('1234')); //hasil false  

Silahkan anda lihat juga tutorial validasi form yang lain pada blog sourcecodeaplikasi.info