Subscribe:Posts Comments
Share |

You Are Here: Home » Elearning, Programing, Uncategorized » Membuat Validasi Form dengan Jquery

Membuat Validasi Form dengan Jquery

Posted on admin on August 18, 2010 // Comments Off

“

Validasi pada sebuah form sangatlah penting, karena bertujuan untuk memperkecil kesalahan user pada saat input data. Oleh sebab itu sudah pasti kita sebagai developer mempunyai tugas untuk mengatasi agar tidak terjadi kesalahan yang fatal nantinya jika data terinput kedalam database.

Jika sebuah web memiliki validasi input yang lemah, suatu saat bisa dengan mudah diruntuhkan atau di rusak oleh black hacker / atau orang tidak bertanggung jawab yang berniat jahat pada situs kita. User bisa saja menyisipkan kode berbahaya pada form. Bahkan sudah banyak contohnya karena masalah keamanan yang kurang baik dari situs tersebut mengakibatkan kerugian beberapa perusahaan.
Validasi input bisa dilakukan dengan dua cara yaitu:
1. Validsi input Berbasis Client Side
2. Validasi input Berbasis Server Side

Untuk kesempatan kali ini saya akan membahas validasi input berbasis client side, dengan menggunakan plugin dari JQuery yang bisa di dowload disini beserta demo :

DEMO APPDOWNLOAD

Validasi Input berbasis Client Side memiliki beberapa keuntungan diantaranya:

  • Server tidak akan terbebani karena proses dilakukan pada komputer client.
  • Karena proses validasi dijalankan pada komputer Client, maka proses akan berjalan lebih cepat.

Example 1# :
HTML

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
 
<form id=""signupform"" autocomplete=""off"" method=""get"" action="""">  <div id=""result"">&nbsp;div>  <table>  <tr>	<td class=""label""><label id=""lfirstname"" for=""firstname"">First Namelabel>td>	<td class=""field""><input id=""firstname"" name=""firstname"" type=""text"" value="""" maxlength=""50"" />td>	<td class=""status"">td>  tr>  <tr>	<td class=""label""><label id=""llastname"" for=""lastname"">Last Namelabel>td>	<td class=""field""><input id=""lastname"" name=""lastname"" type=""text"" value="""" maxlength=""50"" />td>	<td class=""status"">td>  tr>  <tr>	<td class=""label""><label id=""lusername"" for=""username"">Usernamelabel>td>	<td class=""field""><input id=""username"" name=""username"" type=""text"" value="""" maxlength=""50"" />td>	<td class=""status"">td>  tr>  <tr>	<td class=""label""><label id=""lemail"" for=""email"">Emaillabel>td>	<td class=""field""><input id=""email"" name=""email"" type=""text"" value="""" maxlength=""50"" />td>	<td class=""status"">td>  tr>  <tr>	<td class=""label""><label id=""lpassword"" for=""password"">Passwordlabel>td>	<td class=""field""><input id=""password"" name=""password"" type=""password"" maxlength=""50"" value="""" />td>	<td class=""status"">		<div class=""password-meter"">			<div class=""password-meter-message"">&nbsp;div>			<div class=""password-meter-bg"">				<div class=""password-meter-bar"">div>			div>		div>	td>  tr>  <tr>	<td class=""label""><label id=""lpassword_confirm"" for=""password_confirm"">Confirm Passwordlabel>td>	<td class=""field""><input id=""password_confirm"" name=""password_confirm"" type=""password"" maxlength=""50"" value="""" />td>	<td class=""status"">td>  tr>  <tr>	<td class=""label""><label id=""lphone"" for=""phone"">Phone Numberlabel>td>	<td class=""field""><input id=""phone"" name=""phone"" type=""text"" value="""" maxlength=""50"" />td>	<td class=""status"">td>  tr>  <tr>	<td class=""label""><label id=""lcaptcha"" for=""catcha"">Captchalabel>td>	<td class=""field"">	<img id=""imgCaptcha"" src=""create_image.php"" /><br />	<input id=""captcha"" name=""captcha"" type=""text"" value="""" maxlength=""12"" size=""12"" />td>	<td class=""status"">td>  tr>  <tr>	<td class=""label""><label id=""lsignupsubmit"" for=""signupsubmit"">Signuplabel>td>	<td class=""field"" colspan=""2"">	<input name=""signup"" type=""submit"" value=""Signup"" />	td>  tr>  table>form>

JavaScript

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
 
$(document).ready(function() {
	var validator = $(""#signupform"").validate({
		rules: {
			firstname: {required: true},
			lastname: {required: true},
			email: {required: true,email: true},
			phone: {required: true,number: true},
			username: {required: true,minlength: 5},
			captcha: {required: true,minlength: 5},
			password: {password: ""#username""},
			password_confirm: {required: true,equalTo: ""#password""}
		},
		messages: {
			firstname: {required: ""Enter a First Name""},
			lastname: {required: ""Enter a Last Name""},
			email: {
				required: ""Enter a Email"",
				email: ""Email not valid""
			},
			phone: 
	    	

	    	

	      			      			    	
 
	  	 
	  	

 
      
      

		 
 

 	

 




	© 2010 Bilcyber.com · Subscribe:PostsComments · Designed by Billy Wirawan ·