Artikel kali ini kita kan Membuat Validasi Form input Dengan Javascript , Setelah Sebelumnya Suckittrees Dot Com Membuat Artike Tentang Membatasi Jumlah Karakter pada Textarea dengan Javascript  , Kali ini saya ingin berbagi bagaimana cara menggunakan Java Script untuk validasi form input, dengan berbagai jenis form. Validasi Form dengan javascript hanya dapat berjalan disisi client , nah jika browser yang di gunakan client javascript nya tidak diaktifkan maka validasi ini tidak akan berjalan, maka dengan itu perlu ada kombinasi tentang validasi form ini dengan Validasi Form dengan HTML5 yang merupakan pengembangan browser, namun ini juga mengalami kendala , jika browser yang digunakan client belum suport dengan HTML 5 , kita dapat kombinasikan lagi validasi form dengan Membuat Validasi Form Menjadi Array pada PHP

Membuat Script Validasi Form Input Dengan Javascript

1. Mencegah Inputan Kosong
    Misalnya membuat validasi pada input type text dengan Javascipt. Berikut Kode Form nya :

<form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
<p>Username: <input name="username" type="text"></p>
<p><input name="" type="submit" value="Submit"></p>
</form>

Pada form tersebut terdapat kode onsubmit=”return validasi_input(this)” , dengan menggunakan fungsi onsumbit kita dapat membuat function javascript untuk validasi_input pada JavaScript sebelum ke action=”aksi.php”, Berikut Kode JS nya, letakkan di atas Form ya..

<script type="text/javascript">
function validasi_input(form){
  if (form.username.value == ""){
    alert("Username masih kosong!");
    form.username.focus();
    return (false);
  }
return (true);
}
</script>

2. Membatasi Minimal Input dengan Javascipt
Untuk Membatasi Jumlah Inputan , Kita dapat menggunakan Fungsi validasi di bawah ini , ( Gunakan Form diatas, dan ganti javascriptnya )

<script type="text/javascript">
function validasi_input(form){
  var mincar = 8;
  if (form.username.value.length < mincar){
    alert("Panjang Username Minimal 8 Karater!");
    form.username.focus();
    return (false);
  }
   return (true);
}
</script>

Script di atas berfungsi untuk membatasi jumlah inputan minimal sebanyak 8 Karakter

3. Membatasi Minimal inputan serta Huruf dan Angka dengan Javascipt

Gunakan form username saja sebagai contoh, dan ganti JavaScriptnya menjadi berikut

<script type="text/javascript">
function validasi_input(form){
   pola_username=/^[a-zA-Z0-9\_\-]{6,100}$/;
   if (!pola_username.test(form.username.value)){
      alert ('Username minimal 6 karakter dan hanya boleh Huruf atau Angka!');
      form.username.focus();
      return false;
   }
return (true);
}
</script>

 4. Validasi Radio Button dengan Javascript

<form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
<p>Jenis Kelamin: <input type="radio" name="jk" value="L">Laki-Laki
<input type="radio" name="jk" value="P">Perempuan</p>
<p><input name="" type="submit" value="Submit"></p>
</form>

 Untuk Validasi Javascriptnya  :

<script type="text/javascript">
function validasi_input(form){
  function check_radio(radio)
  {
// memeriksa apakah radio button sudah ada yang dipilih
    for (i = 0; i < radio.length; i++)
    {
      if (radio[i].checked === true)
      {
        return radio[i].value;
      }
    }
   return false;
   }
   var radio_val = check_radio(form.jk);
   if (radio_val === false)
    {
      alert("Anda belum memilih Jenis Kelamin!");
      return false;
    }
   return (true);
}
</script>

5. Validasi Combobox dengan Javascript

<form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
<p>Agama: <select name="agama">
          <option value="pilih" selected>--Pilih--</option>
          <option value="islam">Islam</option>
          <option value="kristen">Kristen</option>
          <option value="katolik">Katolik</option>
          <option value="hindu">Hindu</option>
          <option value="budha">Budha</option>
          </select></p>
<p><input name="" type="submit" value="Submit"></p>
</form>

 Untuk Validasi Combobox dengan Javacript berikut codenya :

<script type="text/javascript">
function validasi_input(form){
 if (form.agama.value =="pilih"){
    alert("Anda belum memilih agama!");
    return (false);
 }
return (true);
}
</script>

 6. Validasi Email dengan Javascript

<script type="text/javascript">
function validasi_input(form){
  pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  if (!pola_email.test(form.email.value)){
    alert ('Penulisan Email tidak benar');
    form.email.focus();
    return false;
  }
  return (true);
}
</script>