Validasi form input pada Javascript


saya ingin berbagi bagaimana cara menggunakan Java Script untuk validasi form input, dengan berbagai jenis form. Validasi sendiri merupakan suatu cara untuk mendapat kan data yang sebenarnya dari User yang mengisikan data pada form yang di sediakan

  • Mencegah Inputan Kosong

    Misalnya ada sebuah form katakanlah username, kita ingin user mengisikan  data (username nya) di sana dan tidak boleh kosong. 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)” , fungsinya adalah ketika tombol Submit di klik maka akan menuju ke function 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>
Ketika from dengan nama username valuenya == ” ” (kosong) maka akan muncul alert “Username masih kosong” dan from username akan focus.
  • Membatasi Minimal Inputan

    Gunakan form username diatas sebagai contoh, dan ganti JavaScriptnya menjadi berikut
    <script type="text/javascript">
    function validasi_input(form){
      var mincar = 5;
      if (form.username.value.length < mincar){
        alert("Panjang Username Minimal 5 Karater!");
        form.username.focus();
        return (false);
      }
       return (true);
    }
    </script>
    Jadi ketika isi dari form username panjangnya kurang dari 5, maka akan muncul alert “Panjang Username Minimal 5 Karakter”
  • Minimal Inputan dan hanya Huruf atau Angka

    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>
  • Validasi Pilihan Radio Button

    Sebelumnya sediakan dulu form Radio Button, disini saya mencontohkan pilihan untuk jenis kelamin, dimana user harus memilih laki-laki atau Perempuan. Berikut kode formnya
    <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>
    Pada From tersebut masih terdapat kode onsubmit=”return validasi_input(this)”, Berikut Kode JS untuk fungsi tersebut
    <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>
    Pada Fungsi validasi_Input terdatapat juga fungsi cek_radio yang fungsinya untuk mengembalikan nilai True jika sudah ada yang terpilih dan False jika belum ada yang terpilih.
  • Validasi Untuk Combobox

    Seperti biasa sediakan sebuah form berType Combobox, saya mencotohkan pada pilihan Agama, dimana user harus memilih salah satu dari agama, Berikut kode formnya
    <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>
    Yang harus di ingat adalah, pada combobox sediakan satu pilihan yang bukan datanya(bukan agama), gunanya sebagai acuan pada javascriptnya, kalo form yang saya buat terletak pada kode berikut <option value=”pilih” selected>–Pilih–</option>,bila masih belum ini code JS nya
    <script type="text/javascript">
    function validasi_input(form){
     if (form.agama.value =="pilih"){
        alert("Anda belum memilih agama!");
        return (false);
     }
    return (true);
    }
    </script>
  • Input Hanya Angka

    Kasus yang cocok misalnya dalah input No Telp/Hp pada form, ok tanpa tunggu lama-lama 😀 langsung buat form nya, kalo males, ni kode form nya
    <form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
    <p>Telp/Hp : <input name="telp" type="text"></p>
    <p><input name="" type="submit" value="Submit"></p>
    </form>
    Kalo di lihat, nama form input tersebut adalah telp, jadi value dari form telp tersebut yang harus di cek satu per satu jika bukan angka langsung di tampilkan isi dari alertnya. Berikut kode javascriptnya
    <script type="text/javascript">
      function validasi_input(form){
      if (form.telp.value != ""){
      var x = (form.telp.value);
      var status = true;
      var list = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9");
      for (i=0; i<=x.length-1; i++)
      {
      if (x[i] in list) cek = true;
      else cek = false;
     status = status && cek;
      }
      if (status == false)
      {
      alert("Telp harus angka!");
      form.telp.focus();
      return false;
      }
      }
      return (true);
      }
      </script>
  • Validasi Penulisan Email

    Validasi penulisan email adalah yang paling sering di gunakan, karena alamat email memiliki karakter khusus yaitu @ dan .(titik), jika nama form inputnya dalah email, maka code javasciptnya adalah sebagai berikut :
    <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>

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: