Script Validasi Form Dengan PHP

Script Validasi Form Dengan PHP dan Java Script Sederhana

Pada tutorial kali ini, saya ingin membahas tentang cara membuat form Validasi menggunakan PHP dan Java Script yang paling sederhana, adapun kegunaan dari validasi adalah untuk mendapatkan data yang sesuai dengan kondisinya, supaya tidak penasaran, silahkan sobat praktekkan langsung... 

Validasi Form Kosong

Contohnya disini adalah form pendaftaran, dan kita ingin user mengisikan data username nya, maka pada saat username tidak terisi atau kosong maka proses tidak bias dilanjutkan dan akan muncul pesan peringatan “Nama User Masih Kosong!”. Berikut script atau kode untuk validasi form kosong:

Buatlah kode JS  berikut terlebih dahulu,

<script type="text/javascript">function validasi_input(form){  if (form.nm_user.value == ""){    alert("Nama User Masih Kosong!");    form.nm_user.focus();    return (false);  }return (true);}</script>

Kemudian buatlah form untuk input data user seperti berikut

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

Pada form yang telah kita buat tersebut terdapat kode onsubmit=”return validasi_input(this)” , yang mana fungsinya disini adalah adalah ketika tombol Submit di klik, maka form akan menjalankan perintah function validasi input pada JavaScript terlebih dahulu sebelum menjalankan perintah action=”aksi.php”.

Validasi Minimal Input

Selanjutnya kita akan membahas cara membatasi minimal input pada suatu form, hal ini biasanya kita gunakan pada saat ingin menambahkan password, Contohnya disini adalah form pendaftaran, dan kita ingin user mengisikan data passwornya nya, maka pada saat paswoord yang di inputkan  kurang dari batasan minimal input, maka proses tidak bisa dilanjutkan dan akan muncul pesan peringatan “Password Kurang Dari 8 Karakter”. Berikut script atau kode untuk validasi form Minimal Input:

Buatlah kode JS  berikut terlebih dahulu,

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

Kemudian buatlah form untuk input data user seperti berikut

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

Pada form yang telah kita buat tersebut terdapat kode onsubmit=”return validasi_input(this)”, yang mana fungsinya disini adalah adalah ketika tombol Submit di klik, maka form akan menjalankan perintah function validasi input pada JavaScript terlebih dahulu sebelum menjalankan perintah action=”aksi.php”.

Validasi Radio Button

Untuk form Validasi Radio Button biasanya digunakan untuk memilih jenis kelamin, dimana user harus memilih jenis kelamin Pria atau Wanita, adapun kode script lengkapnya  adalah sebagai berikut :

<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> <form method="post" action="aksi.php" onsubmit="return validasi_input(this)"><p>Jenis Kelamin: <input type="radio" name="jk" value="P">Pria<input type="radio" name="jk" value="W">Wanita</p><p><input name="" type="submit" value="Submit"></p></form>

Pada form yang telah kita buat diatas, terdapat kode onsubmit=”return validasi_input(this)” , yang mana fungsinya disini adalah adalah ketika tombol Submit di klik, maka form akan menjalankan perintah function validasi dan function check_radio yang terdapat pada Java Script terlebih dahulu untuk memastikan bahwa Radio Button Jenis Kelamin Telah dipilih salah satunya, sebelum menjalankan perintah action=”aksi.php”.

Validasi Combobox

Sebagai contoh combobox validation kita akan membuat form dengan Type combobox dengan pilihan agama sebagai contohnya.  Combobox validation bertujuan supaya user memilih salah satu option yang telah di sediakan pada file combo tersebut, berikut contoh scipt atau kode lengkapnya :

<script type="text/javascript">function validasi_input(form){ if (form.agama.value =="pilih"){    alert("Anda Belum Memilih Agama!");    return (false); }return (true);}</script> <form method="post" action="aksi.php" onsubmit="return validasi_input(this)"><p>Agama: <select name="agama">          <option value="pilih" selected>--Pilih Agama--</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 sobat ingat di sini adalah, pada combobox kita wajib menyedikan satu pilihan yang bukan datanya (pada ahal ini bukan agama), gunanya sebagai acuan pada java script nya, padam contoh diatas saya membuat kode <option value=”pilih” selected>–Pilih Agama–</option> sebagai acuan utama, dari contoh diatas jika combo box masih berisi “Pilih Agama” maka hal tersebut sama dengan file masih bernilai false dan validation akan menampilakn pesan "Anda Belum Memilih Agama!".

Validasi Number / Input Hanya Angka

Contoh yang paling cocok kita gunakan adalah input No Tlp/Hp pada form, berikut script atau kode lengkapnya

<script type="text/javascript">  function validasi_input(form){  if (form.no_telp.value != ""){  var x = (form.no_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("No Telephone Harus Angka!");  form.no_telp.focus();  return false;  }  }  return (true);  }</script> <form method="post" action="aksi.php" onsubmit="return validasi_input(this)"><p>No Telp/Hp : <input name="no_telp" type="text"></p><p><input name="" type="submit" value="Submit"></p></form>

Kalau kita perhatikan dari kode diatas, nama form input tersebut adalah no_telp, jadi value dari form no_telp tersebut yang harus di periksa satu per satu jika terdapat karakter yang bukan angka maka pesan error atau alertnya akan langsung ditampilkan.

Validasi Form Email

Validasi penulisan form email adalah salah satu validasi yang paling sering kita jumpai, dimana pada sebuah email terdapat karakter khusus berupa @ dan .(titik), kali ini kita akan membuat sebuah form input email sebagai contoh, dank script atau kode lengkapnya adalah sebgai 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 ('Email Yang Anda Tuliskan Belum Benar');    form.email.focus();    return false;  }  return (true);}</script> <form method="post" action="aksi.php" onsubmit="return validasi_input(this)"><p>Email User: <input name="email" type="text"></p><p><input name="" type="submit" value="Submit"></p></form>

Demikianlah tutorial beberapa buah form validation yang dapat saya sampaikan, semoga tutorial kalai ini dapt bermanfaat bagi siapa saja yang membutuhkan. bagi sobat yang membutuhkan panduan untuk membuat Penjumlahan Otomatis Pada PHP langsung saja klik linknya diatas ya...

Jika sobat memiliki contoh form validation lainnya, atau ingin bertanya mengenai form validation, silahkan tuliskan pesan sobat di form komentar. terimakasih...

Share this post