Membuat Validasi Form dengan Jquery

Subyek: Membuat Validasi Form dengan Jquery Tue Oct 25, 2011 3:29 am

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 seperti contoh dibawah ini :

[You must be registered and logged in to see this image.]

silakan download [You must be registered and logged in to see this link.]

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

Code:: <form id="signupform" autocomplete="off" method="get" action="">
<div id="result"> </div>
<table>
<tr>
<td class="label"><label id="lfirstname" for="firstname">First Name</label></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 Name</label></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">Username</label></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">Email</label></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">Password</label></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"> </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 Password</label></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 Number</label></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">Captcha</label></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">Signup</label></td>
<td class="field" colspan="2">
<input name="signup" type="submit" value="Signup" />
</td>
</tr>
</table>
</form>

JavaScript

Code:: $(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: {
         required: "Enter a Phone",
         number: "Only enter number"
      },
      username: {
         required: "Enter a username",
         minlength: jQuery.format("Enter at least {0} characters")
      },
      captcha: {
         required: "Enter a captcha",
         minlength: jQuery.format("Enter at least {0} characters")
      },
      password_confirm: {
         required: "Repeat your password",
         minlength: jQuery.format("Enter at least {0} characters"),
         equalTo: "Enter the same password as above"
      }
   },

   errorPlacement: function(error, element) {
      error.prependTo( element.parent().next() );
   },
   submitHandler: function() {
      $.post("captcha.php",{
         firstname: $("#firstname").val(),
         lastname: $("#lastname").val(),
         username: $("#username").val(),
         email: $("#email").val(),
         password: $("#password").val(),
         phone: $("#phone").val(),
         captcha: $("#captcha").val()
      },
      function(res){
         // alert(res);
         $("#response").html(res);
      });
   },
   success: function(label) {
      label.html(" ").addClass("checked");
   }
});

$("#username").focus(function() {
   var firstname = $("#firstname").val();
   var lastname = $("#lastname").val();
   if(firstname && lastname && !this.value) {
      this.value = firstname + "." + lastname;
   }
});
});

Dan untuk mengatasi spam kita membutuhkan validasi tambahan yaitu captcha atau anti spam, captcha ini sangat di perlukan untuk beberapa form tertentu misal : form registrasi atau form dimana client / user dapat mengirim data ke database secara langsung. maka untuk mengatasinya kita dapat menambah keamanan situs kita dengan cara membuat captcha.

create_image.php

Code:: /*

* @package default

* @author Mawaddi Rachman

* @email [You must be registered and logged in to see this link.]

*

* This function create image captcha

*

*/

session_start();

create_image();

exit();

function create_image(){

$md5_hash = md5(rand(0,999));

$security_code = substr($md5_hash, 15, 5);

$_SESSION["security_code"] = $security_code;

$width = 100;

$height = 30;

$image = ImageCreate($width, $height);

$white = ImageColorAllocate($image, 255, 255, 255);

$black = ImageColorAllocate($image, 0, 0, 0);

$grey = ImageColorAllocate($image, 204, 204, 204);

ImageFill($image, 0, 0, $black);

ImageString($image, 40, 30, 6, $security_code, $white);

ImageRectangle($image,0,0,$width-1,$height-1,$grey);

imageline($image, 300, $height/2, $width, $height/2, $grey);

imageline($image, $width/2, 300, $width/2, $height, $grey);

header("Content-Type: image/jpeg");

ImageJpeg($image);

ImageDestroy($image);

}

captcha.php

Code:: /*

* @package default

* @author Mawaddi Rachman

* @email [You must be registered and logged in to see this link.]

*

* This captcha validation

*

*/

session_start();

if (!$_POST)

die("You can only reach this page by posting from the html form");

if(($_POST["captcha"] == $_SESSION["security_code"]) && (!empty($_POST["captcha"]) && !empty($_SESSION["security_code"]))){

echo "<h1>Captcha valid!</h1>";

// jika ingin membuat insert ke dalam database

/*

$sql = "INSERT INTO .....";

$exec = execute your query ($sql);

if($exec){

      echo "success insert to db";

   }else{

      echo "Failed insert to db";

   }

*/

}else{

echo "<h1>Captcha not valid!</h1>";

}

Pepatah kata mengatakan tak ada gading yang tak retak, maka tidak ada di dunia ini yang sempurna, sebaik apapun sebuah keamanan atau security pada suatu web pasti ada kelemahan, begitu pula validasi form ini. Karena validasi input ini berbasis Client side ditulis dengan java Script, maka client bisa dengan mudah mematikan fungsi javaScript pada web browsernya untuk mem-by-pass validasi dan berpotensi untuk mengirimkan informasi keliru yang (biasanya) bersifat merusak. Maka anda dapat menambah keamanan security situs anda dengan validasi input yang ke -2 yaitu dengan validasi input berbabasis server side seperti yang saya sudah bahas di atas. Mungkin di lain kesempatan saya akan menulis untuk validasi input untuk server side.terima kasih. Membuat Validasi Form dengan Jquery 271371

Membuat Validasi Form dengan Jquery 271371

Subyek: Re: Membuat Validasi Form dengan Jquery Mon Mar 18, 2013 11:57 am

Tenkyu om....makasih so Much

Subyek: Re: Membuat Validasi Form dengan Jquery Thu Mar 21, 2013 3:41 pm

354inside wrote:: Tenkyu om....makasih so Much

ente jokam yah bro

Subyek: Re: Membuat Validasi Form dengan Jquery Thu Apr 11, 2013 10:45 am

Cucune mbahman bro...!!!why??

Subyek: Re: Membuat Validasi Form dengan Jquery Thu Apr 11, 2013 5:01 pm

thx infonya, btw, klo validasinya d ganti ama yg lain bisa?

» Membuat Vertical Sliding Info Panel Dengan JQuery
» membuat jquery objek dock
» kumpulan jquery
» Introduction to jQuery
» Video Tutorial jQuery