Cara Membuat Validasi Form Input Data Dengan Java Script

Java Script untuk validasi form input sebenarnya sangatlah dibutuhkan dalam membuat web, dimana validasi ini merupakan salah satu cara yang untuk mendapatkan kebenaran data, ke validtan data, dan validasi ini juga berguna untuk melengkapi inputan data.

validasi-input-data-java-script
Validasi Java Script

contoh: kamu pernah daftar email ngak? pasti pernahkan… misalnya ketika kita melakukan register di gmail, kemudian kita disuruh memasukan nama, tanggal lahir, kemudian email dan sebagainya. nama kita tidak boleh kosong, kalau inputan nama kosong maka akan keluar pesan nama harus di isi.

nah di tutorial Cara Membuat Validasi Form Input Data Dengan Java Script kita akan mempelajari bagaimana membuat validasi suatu form inputan wajib di isi, kita akan membuat validasi minimal inputan misalnya nama harus 6 karakter, atau validasi minimal inputan dan yang di input harus hurup dan angka. dan validasi pilihan radio button, validasi pilihan combobox, validasi inputan hanya angka, serta validasi inputan email, dimana email biasanya ditandai dengan @, jika tidak pakai @ maka akan error.

oke berikut tutorial lengkap Membuat Validasi Form Input Data Dengan Java Script

pertama buka text editor anda, bisa pakai dreamweaver atau notepad juga gk pa-pa.

  • Inputan Tidak Boleh Kosong

Misalnya anda mau login ke sosial media, pasti email anda tidak boleh kosong, nah bagaiman cara mencegah inputan form tidak boleh kosong, kalau masih kosong akan keluar pesan alert. oker berikut cara mencegah inputan kosong.

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

simpan script diatas dengan nama terserah anda, letakan di dalam htdocs anda.

onsubmit="return validasi_form_input(this)" jika kita tekan tombol submit maka akan memanggil fuction validasi, berikut script validasi nya

<script type="text/javascript">
function validasi_form_input(form){
  if (form.username.value == ""){
    alert("Brooo.. Isi Dulu Username nya,,, masih kosong Tu...!");
    form.username.focus();
    return (false);
  }
return (true);
}
</script>

gabungkan kedua script tersebut menjadi satu, seperti dibawah ini

<form method="post" action="proses.php" onsubmit="return validasi_form_input(this)">
<p>Username: <input name="username" type="text"></p>
<p><input name="" type="submit" value="Submit"></p>
</form>
<script type="text/javascript">
function validasi_form_input(form){
  if (form.username.value == ""){
    alert("Brooo.. Isi Dulu Username nya,,, masih kosong Tu...!");
    form.username.focus();
    return (false);
  }
return (true);
}
</script>

coba dibuka di localhost anda, misalnya http://localhost/nama_file.php

kemudian biarkan username kosong dan tekan submit maka akan keluar pesan Brooo.. Isi Dulu Username nya,,, masih kosong Tu…!

setelah username diisi kemudian klik submit maka akan menuju ke proses.php

  • Validasi Untuk Membatasi Minimal Inputan

misalnya kita ingin user yang mendaftar ke web kita mengisi username minimal 5 karakter, berikut java scriptnya

ganti java script diatas dengan javascript dibawah ini.

<script type="text/javascript">
function validasi_form_input(form){
  var mincar = 5;
  if (form.username.value.length < mincar){
    alert("Bro..Username Minimalnya 5 Karater..!");
    form.username.focus();
    return (false);
  }
   return (true);
}
</script>

jika username yang diisi cuma 3 karakter maka akan keluar pesan Bro..Username Minimalnya 5 Karater..!

  • Validasi Minimal Inputan dan hanya Boleh Huruf atau Angka

misalnya dalam input data kita ingin data yang di input hanya huruf dan atau angka tidak boleh titik koma, berikut cara membuatnya.

<form method="post" action="proses.php" onsubmit="return validasi_form_input(this)">
<p>Username: <input name="username" type="text"></p>
<p><input name="" type="submit" value="Submit"></p>
</form>
<script type="text/javascript">
function validasi_form_input(form){
  pola_username=/^[a-zA-Z0-9\_\-]{5,100}$/;
   if (!pola_username.test(form.username.value)){
      alert ('Bro... Username minimal 5 karakter dan hanya Boleh Huruf atau Angka Saja!');
      form.username.focus();
      return false;
   }
return (true);
}
</script>
  • Membuat Validasi Untuk Combobox

misalnya dalam input jenis kelamin atau agama, kita ingin agar user harus memilih agamanya. berikut scriptnya

<form method="post" action="proses.php" onsubmit="return validasi_form_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>
<script type="text/javascript">
function validasi_form_input(form){
 if (form.agama.value =="pilih"){
    alert("Pilih Agama Anda!");
    return (false);
 }
return (true);
}
</script>

Pelajari Juga: Cara Membuat Combobox Bertingkat Dinamis Dari Database

  • Membuat Validasi Radio Button

biasanya Validasi radio button ini dipakai dalam pemilihan jenis kelamin, dan jika jenis kelamin belum dipilih maka akan keluar pesan untuk memilih. berikut scriptnya

<form method="post" action="proses.php" onsubmit="return validasi_form_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>
<script type="text/javascript">
function validasi_form_input(form){
  function check_radio(radio)
  {
// periksa apakah radio button sudah 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("Kamu belum memilih Jenis Kelamin!");
      return false;
    }
   return (true);
}
</script>
  • Validasi Input Angka atau Nomor

misalnya dalam penginputan nomor handphone maka tidak boleh ada huru az

<form method="post" action="proses.php" onsubmit="return validasi_form_input(this)">
<p>Telp/Hp : <input name="hp" type="text"></p>
<p><input name="" type="submit" value="Submit"></p>
</form>
<script type="text/javascript">
function validasi_form_input(form){
  if (form.hp.value != ""){
  var x = (form.hp.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("No Handphone harus angka!");
  form.hp.focus();
  return false;
  }
  }
  return (true);
  }
  </script>
  • Membuat Validasi Input Email

yang namanya email sudah pasti pakai @, jika tidak pakai @ maka akan kita buat error inputannya.

<form method="post" action="proses.php" onsubmit="return validasi_form_input(this)">
<p>Email : <input name="email" type="text"></p>
<p><input name="" type="submit" value="Submit"></p>
</form>
<script type="text/javascript">
function validasi_form_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>

nah itulah validasi-validasi yang kita buat dengan java script kali ini semoga tutorial cara membuat validasi form input dengan java script ini bisa menjadi contoh dalam pembuatan aplikasi web anda. jika ada yang kurang jelas mohon disampaikan ke saya. dan jika jelas mohon sharenya.

oke sekian

salam programer – phpdanmysql.com

Keyword:

  • inputan kosong java
  • cara membuat validasi dalam my sql
  • cara mengembalikan inputan databas menjadi 0
  • materi membuat validasi phpmysql dengan javascript
  • minimal inputan dan hanya huruf atau angka karakter

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas