Hal wajib yang harus dilakukan oleh programmer saat membuat web form adalah melakukan validasi input. Ada dua teknik validasi yang cukup populer. Teknik pertama menggunakan Server side validation.  Jika anda menggunakan PHP, maka setelah user menekan tombol submit, data divalidasi oleh PHP, jika data tidak valid tampilkan pesan error. Cara ini tidak efektif karena setiap kali melakukan validasi harus terkoneksi keserver. Di sisi lain, cara ini juga membebani kerja Server.

Cara kedua menggunakan Javascript di client. Sayangnya, validasi javascript juga cukup ribet. Mungkin untuk validasi “Tidak boleh Kosong” cukup mudah, namun mari kita lihat menggunakan kasus sebagai berikut:

Dalam sebuah website, tersedia form pendaftaran dengan field sebagai berikut :

  1. Nama syarat validasinya harus disi, nama maximal 20 karakter dan karakternya harus huruf atau spasi
  2. Email syarat validasinya harus disi dan email harus valid.
  3. Umur, syaratnya input harus angka dan umur harus lebih dari 13 tahun.
  4. Jenis kelamin harus memilih salah satu
  5. Propinsi harus pilih salah satu (combobox).

Gambaran dari form yang diharapkan client  adalah sebagai berikut

Jika user tidak memasukan nama, maka akan muncul pesan “nama belum disi”, jika email tidak valid maka akanmuncul pesan “email tidak valid” dan seterusnya. Tentunya untuk membuat validasi dengan syarat diatas tidaklah mudah jika anda membuatnya sendiri. Untungnya sekarang anda library javascript untuk melakukan validasi dengan mudah. Anda bisa mendownloadnya di sini.

Untuk menggambarkan bagaimana memakai library javascript ini, saya akan membuat contoh seperti screenshoot diatas. Untuk mengimplementasikan libari ini hanye perlu 3  langkah

  1. include javascript di header
  2. buat Script form plus tempat untuk menampilkan error
  3. Buat validasi persis dibawah form

 langkah 1:

<script language="JavaScript" src="validjs.js" 
type="text/javascript"></script>

langkah 2:

<form name="myform" action="" method='POST'  >
   Nama
    <input type="text" name="nama" id='nama'><br/>
   EMail
    <input type="text" name="email"><br/>
   Umur
    <input type="text" name="umur"><br/>

   Jenis kelamin
    <input type='radio' name='jk' value='P'>Pria
	<input type='radio' name='jk' value='W'>Wanita<br/>
   Propinsi  
	   <SELECT name="propinsi">
		<option value="0" selected>--pilih provinsi--</option>
		<option value="1" >Jawa Tengah</option>
		<option value="2" >Jawa Timur</option>
		<option value="3" >Jawa Jawa Barat</option>
	  </SELECT>
<br/>
    
	<div id='myform_errorloc' style='color:red'>
                              </div>
   <br/>
    <input type="submit" value="Submit">
</form>

langkah 3:

<script language="JavaScript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
  var frmvalidator  = new Validator("myform");
 frmvalidator.EnableOnPageErrorDisplaySingleBox();
 frmvalidator.EnableMsgsTogether();
 
  frmvalidator.addValidation("nama","req","Nama belum di isi");
  frmvalidator.addValidation("nama","maxlen=20","nama Maximal  20");
  frmvalidator.addValidation("nama","alpha_s","Nama tidak boleh mengandung angka atau symbol");

  frmvalidator.addValidation("email","req");
  frmvalidator.addValidation("email","email","email tidak valid");
  
  frmvalidator.addValidation("umur","req");
  frmvalidator.addValidation("umur","numeric");
  frmvalidator.addValidation("umur","gt=12","umur minimal harus 13");
  
  frmvalidator.addValidation("jk","selone","anda belum memilih jenis kelamin");
  frmvalidator.addValidation("propinsi","dontselect=0","Anda belum memilih propinsi");
</script>

Nah, untuk lebih jelasnya silahkan klik disini untuk mencoba demonya dan download source codenya disini.

Untuk melihat berbagi jenis validasi yang didukung oleh library ini silahkan cek disini

Categories: Web

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. Ingin Kerjasama, Pasang Iklan, Membuat aplikasi Android atau Web? hubungi saya di candraadiputra (at) gmail (dot) com atau WA ke 081328533115

11 Comments

Eni · 30 December , 2016 at 10:00 am

terimakasih sangat membantu….

Muhammad Syakirurahman · 4 December , 2014 at 1:07 pm

terima kasih mas chandra, cara baru bikin validasi form nih hehe..
Btw, saya juga punya nih artikel serupa.. mungkin bisa jadi tambahan disini, :D
form validation dengan HTML5

Kurnia Panda Gajeon · 17 October , 2014 at 2:10 pm

Terimakasih mas sudah mau berbagi :D

Coret2Iseng · 16 June , 2014 at 12:29 am

thank tutorialnya

Anonymous · 31 May , 2014 at 10:52 am

mantap lah

Anonymous · 22 April , 2014 at 12:28 am

wadwad

andi · 29 October , 2013 at 4:25 pm

validjs.js nya mana bosssssss

Anonymous · 11 April , 2013 at 2:04 pm

thanx atas postingannya

Leave a Reply to Kurnia Panda Gajeon Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.