Membuat Validasi Form dengan Jquery

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

<form id="signupform" autocomplete="off" method="get" action=""> <div id="result">&nbsp;</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">&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 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

$(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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

/*   * @package default   * @author Mawaddi Rachman   * @email adi_bujang@yahoo.com   *   * 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

/*   * @package default   * @author Mawaddi Rachman   * @email adi_bujang@yahoo.com   *   * 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
.

sumber : http://www.koder.web.id/