Tutorial validasi form dengan javascript

Question

Home
Javascript Jquery
Validasi Form Input Dengan Javascript

Validasi Form Input Dengan Javascript

Table of Contents Show

Membuat Script Validasi Form Input Dengan Javascript
Artikel Rekomendasi
Artikel TerkaitCara Membuat Limit Checkbox dengan JavascriptMenampilkan Hari Tanggal Jam Sekarang Dengan JavascriptMenempatkan Kode PHP di Dalam JavascriptMenambah Row di HTML secara Dinamis dengan JavaScriptRegistrasi User dengan php AjaxMembuat Link Sumber otomatis saat copy Pastevalidasi multiple CheckboxTutorial menghitung Jumlah string di javascriptCara Membuat Efek Show Hide Dengan JqueryCara explode di Javascript dengan Fungsi Split

Posted in at 04 Januari 2017 With

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>