Validasi Form dengan jQuery

Contoh tampilan form saat error menggunakan jquery validate

Validasi form adalah hal yang wajib dilakukan dalam setiap pembuatan aplikasi. Ada banyak cara memvalidasi form berbasis web, namun cara yang paling simple dan menarik adalah menggunakan jQuery, lebih tepatnya menggunakan jquey Plugin bernama jQuery validate.

Sebelumnya saya pernah membahas tentang validasi form menggunakan class javascript yang bisa anda baca di sini, namun kekurangan dari class tersebut adalah sebagai berikut

  • Validasi dilakukan saat submit
  • script validasi cukup panjang
  • Pesan error tidak interaktif.

Dengan menggunakan jQuery validate, maka ketiga kekurangan diatas bisa diatasi.Kembali ketopik, saya akan membuat form pendaftaran dengan tampilan seperti dibawah ini. Error akanmuncul jika input user salah atau tidak valid. Error muncul disamping kanan textfield, error bersifat interaktif, jadi kalau textfield di isi dengan data yang tidak valid, pesan error akan muncul saat itu juga dan pesan error akan hilang dengan sendirinya jika user mengisi data yang valid.

Contoh tampilan form saat error menggunakan jquery validate

Langkah langkahnya ada 4 yaitu
1. include file Jquery, jquery.validate dan message_id.js dan file css jika ada. message_id.js adalah text pesan error yang akan dimunculkan di form, anda bisa mengedit pesan error disini.

<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="messages_id.js"></script>

2. Inisialiasasi diawal loading halaman

<script>$(document).ready(function() {
				$("#form1").validate();
			});
</script>

3. Buat script formnya. (baca keterangannya di form)

form id="form1" method="get" action="">
			<fieldset>
				<legend>
					 Form pendaftaran
				</legend>
				<p>
					<!--perhatikan antara label for ="name",id="name",name='nama'
					semua harus sama -->
					<label for="nama">Name</label>
				     <!--perhatikan class="required" dan minlength="2" ini 
				     	adalah format cek validasi gaya jquery 
				     	validasi apa saja yang didukung lihat lengkapnya diwebsite -->
					<input id="nama" name="nama" size="25" class="required" minlength="2" />
				</p>
				<p>
				<label for="umur">umur</label>
			
				<input id="umur" name="umur" size="25" class="required number" />
				</p>
				<p>
					<label for="email">E-Mail</label>
				
					<input id="email" name="email" size="25"  class="required email" />
				</p>
				<p>
					<label for="url">URL</label>
					<em> </em>
					<input id="url" name="url" size="25"  class="url" value="" />
				</p>
				<p>
					<label for="ccomment">Your comment</label>
								<textarea id="comment" name="comment" cols="20"  class="required" minlength="10"></textarea>
				</p>
				<p>
					<input class="submit" type="submit" value="Daftar"/>
				</p>
			</fieldset>
		</form>

source code dan demo
Demo bisa anda coba sendiri disini dan source code lengkap bisa anda download disini

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

3 thoughts on “Validasi Form dengan jQuery”

  1. tur suwun om candara… manteb.. izin donlod dam mempelajarinya, saya jg donlod yang multi lang.. berkat om candra saya jadi bisa yang multi lang, dan ini mau belajar yang menggunakan jquery.. matur suwun sanget.

Tinggalin komentar dong!