Cara Mudah Validasi Form

Published by Candra Adi Putra on 2 September , 2012

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:

?

source code

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

langkah 2:

?

source code

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<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:

?

source code

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

<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