jValidator ditulis berdasarkan sebuah kebutuhan untuk melakukan validasi pada input box secara langsung ketika input diisi. Dengan ide dan desain program terinspirasi dari widget dijit.form.ValidationTextBox milik DojoToolkit. Namun dengan script yang jauh lebih kecil dibandingkan menggunakan scipt dojo secara kesuluruhan. Sebagai plugin dari jQuery, jValidator dapat digunakan bersamaan dengan plugin jQuery lainnya, namun tidak dengan plugin yang berfungsi sama.

Penggunaan

Jangan lupa sertakan script nya, beserta jQuery.

	<script type=’text/javascript’ src=’/lokasi/jquery.js’> </script> 
	<script type=’text/javascript’ src=’/lokasi/jvalidator.js’> </script>
	

Lakukan inisialisi jValidator, contoh ini menggunakan semua opsi dengan nilai default. Tidak semua opsi harus diberikan, nilai default nya adalah seperti dibawah.

	
	<script type=’text/javascript’>  
		$(“#jquerySelector”).jvalidator({ 
		regex: null, 
		required: false, 
		validClass: null, 
		invalidClass: null, 
		invalidMessage: 'invalid value', 
		invalidMessageClass: null 
		}); 
	</script>
	

Parameters

• Regex
  
  regular expression yang digunakan untuk memvalidasi input. Namun nilai ini hanya akan digunakan apabila pada input field tidak terdapat attribute validatorRegex. Jika parameter ini dan attribute validatorRegex bernilai NULL, maka input tidak akan divalidasi isinya.

• Required
  
  menandai sebuah input harus boleh bernilai kosong atau tidak, validasi ini hanya memeriksa adanya input atau tidak, tanpa memperdulikan apa isinya. Dan pada checkbox, Required akan memeriksa apakah checkbox tersebut dicheck atau tidak.

• validClass
  
  class css yang akan dikenakan pada input apabila inputnya sudah valid.

• invalidClass
  
  class css yang akan dikenakan pada input apabila inputnya tidak valid

• invalidMessage
  
  pesan yang akan ditampilkan apabila input tidak valid, namun nilai ini hanya digunakan apabila input tidak memiliki attribute invalidMessage

• invalidMessageClass
  
  class css yang akan dikenakan pada box pesan error. Jika tidak menginginkan tampilan pesan ini, silakan gunakan (sebagai contoh) properti visibility:hidden

Setelah proses inisialisi diatas, setiap input akan melakukan validasi secara sendiri-sendiri dan terpisah dari input lainnya. Namun, hal ini tentunya tidak cukup ketika form secara keseluruhan akan diproses. jValidator menyediakan fungsi jvalidate() untuk mengatasi hal ini.

Penggunaan

	$('#formSelector').jvalidate({
		alert: true,
		message: null
	});
	

Parameter

• alert
  
  Boolean (default: true), akan muncul pesan alert untuk setiap input yang tidak valid, namun pesan ini hanya muncul apabila ada pesan yang ditampilkan

• message
  
  String (default: null), pesan yang akan ditampilkan. Jika bernilai null, maka akan diambil dari properti invalidMessage input yang bersangkutan. Pesan ini akan ditampilkan jika alert bernilai true;

Fungsi ini mengembalikan nilai boolean TRUE jika seluruh input sudah valid, dan FALSE jika terdapat input yang belum valid.

	<input type=’text’ name=’testField’ validatorRegex=’email’> 
	<input type=’text’ name=’englishForWarna’ validatorRegex=’(colou{0,1}r)’>

<input type=’text’ name=’requiredField’ required=true>

<input
	type=’text’
	name=’englishForWarna’
	required=true
	validatorRegex=’(colou{0,1}r)’
	invalidMessage=’warna dalam bahasa inggris adalah color atau colour,
	field ini harus diisi’
>
		

jValidator mendukung tampilan dengan desain yang dapat melebur dengan desain website apapun. Karena seluruh element yang digunakan tidak diberikan styling apapun, hanya berupa html dasar. Dan mendukung parameter untuk css yang dapat ditentukan pada saat inisialisasi jValidator, lihat di parameter untuk class css yang didukung. Secara default, jValidator hanya akan memberikan posisi pada pesan error, dan hal ini dapat dengan mudah di-overwrite dengan memberikan class css yang sesuai.

jValidator merupakan validasi yang dilakukan oleh sisi client dengan memanfaatkan Javasacript. Hal ini akan sangat mudah dilewati oleh user, jika mereka tidak menginginkan adanya validasi ini. Karena itu, validasi pada sisi server (php, asp, dll) disarankan untuk tetap melakukan validasi. Validasi pada sisi client hanya memberikan kesan cepat dan interaktif dengan user, mengingat user tidak perlu berulang-ulang mengirimkan suatu form hanya karena input yang tidak valid, dan disisi server, hal ini akan mengurangi beban request di server.

jValidator tidak melakukan validasi input/isi pada checkbox dan hanya melakukan validasi required saja. Hal ini didasari pada pemikiran bahwa isi checkbox adalah ditentukan oleh programmer ketika menggunakan checkbox, dengan demikian isi checkbox ini pada dasarnya adalah dianggap benar, apabila user diperlukan untuk melakukan penyertaan pada pilihan checkbox, maka disinilah peran required bekerja.

jValidator tidak melakukan validasi apapun pada input tipe radio. Pada dasarnya isi pada sebuah radio button sama seperti checkbox, ditentukan oleh programmer itu sendiri, sehingga pada dasarnya dianggap benar. Dan juga jika radio button harus terpilih pada suatu deretan pilihan, programmer dapat langsung memberikan attribute checked=true, dengan demikian paling tidak satu pilihan akan terpilih. Dan hal ini adalah native dari html itu sendiri.

jValidator bekerja pada seluruh input dan textarea, kecuali yang disebutkan diatas, dan melakukan inisialisasi pada seluruh element yang diberikan secara bersamaan, Karena itu penting agar seluruh sintaks Regular Expression yang digunakan adalah benar, karena satu kesalahan pada satu field akan mengakibatkan jValidator tidak bekerja pada semestinya.

jValidator adalah script yang ditulis sebagai plugin dari library jQuery. Dapat digunakan secara bebas pada website apapun, namun tidak diizinkan untuk mengubah isi script tersebut dalam bentuk apapun.

Sebagai initial release, jValidator dan saya sebagai penulis, menerima semua saran dan kritik yang membangun untuk perkembangan jValidator ini, dan akan sangat menghargai jika anda bersedia memberitahukan bug, error, atau ketidaksesuaian yang mungkin terjadi.