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

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("&nbsp;").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 [email protected]
 
 *
 
 * 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 [email protected]
 
 *
 
 * 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.

 

52 Comments

 

  1. May 12, 2010  3:32 pm by anung Reply

    Oh ya mas, kalau mau dibuat script insert into sql, yang ditambahi atau diubah scriptnya pada bagian yang mana ya?
    Thanks

  2. May 12, 2010  5:22 pm by Mawaddi Reply

    klo mau modifikasi di script captcha nya disitu ada pengecekan klo captchanya true maka buat perintah insert nya.
    tp klo tidak pake captcha pas di action tujuan yang di buat fungsi insertnya.

  3. May 12, 2010  9:27 pm by anung Reply

    Sudah dibuat perintah insertnya. Tapi variable yang di $_POST kok gak mau muncul ya?
    Form methodnya pakai post atau get?

  4. May 13, 2010  11:11 am by anung Reply

    kok belum bisa ya di variable $_POSTnya?
    form method pakai post atau get?
    Saya pakai aplikasi xampp

  5. May 14, 2010  4:19 pm by Mawaddi Reply

    Mas anung coba skrg download demo nya lagi, saya sudah upload yang terbaru khusus buat mas anung :D
    dan mas anung tinggal taro peritah insert di file captcha.php.
    di situ pke method post.
    selamat mencoba yah.

  6. May 17, 2010  7:29 am by anung Reply

    Ya akan saya coba. Sayangnya komputer kantor yang sering kubuat mainan php sedang dibawa keluar. Jadi harus cari penggantinya dulu. He he he
    Terima kasih

  7. May 18, 2010  9:31 am by anung Reply

    Kok Capthcanya ndak mau keluar ya malahan?
    Padahal yang ada di demo app bisa keluar.
    Apa karena aku pakai xampp yg paling baru, jadi malah gak jalan?
    He he he

  8. May 19, 2010  4:13 pm by anung Reply

    wah ternyata kurang <?php
    Habis pakai versi lama pakai <? dah cukup.

    • May 20, 2010  3:11 pm by ibnoe Reply

      versi php atau settinganya itu gan!!

  9. May 21, 2010  1:55 pm by Andika Hermasyah Reply

    om ada yg bisa refresh g tu captchanya..
    jadi refresh image gitu..keren kalau ada tambahan seperti itu..
    thx tutornya ^.^

  10. May 24, 2010  9:55 am by Mawaddi Reply

    klo mau pke refresh tinggal buat fungsi refresh yg bisa manggil captchanya lagi mas.

  11. June 1, 2010  3:21 pm by sala Reply

    kalau buat radio gimana? aku coba buat untuk atur jenis kelamin (Pria/Wanita), jadinya kok Pria terus?
    Pria
    Wanita

  12. June 2, 2010  4:04 pm by Mawaddi Reply

    maksudnya mau di buat default mas?
    atau bukan?
    saya rada bingung dengan pertanyaan nya....

  13. June 4, 2010  11:04 am by sala Reply

    ndak. aku buat dua pilihan, pria dan wanita. tetapi selalu yang terpilih pria.gimana?
    form type=text name=sex id=sex value=pria
    form type=text name=sex id=sex value=wanita
    td class='status'

  14. June 25, 2010  2:44 pm by habib Reply

    captchanya kok gag muncul ya?? pdhl dah kutambah <?php
    dan gimana caranya ngambil fungsi capchanya supaya bisa ngerefresh lagi??

  15. July 17, 2010  2:24 pm by zoel Reply

    kalau untuk model select...bagai mana ya..trims

  16. July 19, 2010  4:06 pm by Ibnoe Reply

    mas zoel, mksdnya select box ya??
    utk select box, sebetulnya sama saja
    ex :
    // javascriptnya





    // formnya


    *) klo mau lebih jelas bisa lihat

  17. August 2, 2010  3:19 pm by andre Reply

    mas .. untuk jsp bsa gak ??

  18. August 17, 2010  2:43 am by DolpHo Reply

    mas, mau nanya nih...
    kalo kode buat ngecek ID yang sama gimana yah?

  19. September 1, 2010  3:49 pm by bodohsan Reply

    bos ni coding bisa diimplementasikan ke codeiginter ngak ya??????
    cos aku lagi mau belajar dengan codeiginiter

    kalo bisa gimana cara mengimplementasikan

  20. September 3, 2010  11:53 am by ibnoe Reply

    Bisa, tinggal di taroh di viewnya saja.

  21. September 20, 2010  7:24 am by on formula Reply

    Tutorial yang sangat bermanfaat. Tak coba terapak di website ku biar tambah JOOS. Thanks

  22. October 1, 2010  9:03 am by saleh Reply

    Captcha nya ngga berfungsi sesuai dengan tampilan gambar, required - nya cuma : minlength. Gimana tuh

  23. October 14, 2010  10:06 am by nubi Reply

    mas, kq captcha nya nga nampak gambarnya y...
    kira2 apa masalahnya?
    mohon pencerahanny.

  24. December 4, 2010  9:27 pm by Afri Reply

    mas, udah berhasil buat. tapi pas klik submit kok g mau jalan ke page selanjutnya ya ?
    udah dicoba pake html jg g mau.
    action udah diisi. mohon pencerahannya. :)

  25. December 9, 2010  3:27 pm by cozim3kyn Reply

    Kalo di tambahin validasi tanggal menggunakan datepicker ginama ??? apa yang harus di rubah atw di tambahin.Thanks

  26. February 6, 2011  2:02 pm by Andyra Reply

    ini,, ini ... yg di cari2 dari td..
    mantap dah..
    di pelajari dlu y kk
    ntr klo w binggung leh tny2 y kk

  27. February 10, 2011  2:08 pm by Mawaddi Reply

    ok, selamat mencoba.semoga bermanfaat.

  28. March 12, 2011  3:08 am by Lucky Mahrus Reply

    Klo u/ captcha nya pke library bawaan CI 2.0 gmn?

  29. March 12, 2011  5:47 pm by ibnoe Reply

    @lucky: sama saja.. tidak ada perubahan

  30. March 23, 2011  4:13 am by jw Reply

    mas maaf ni saya baru belajar php... tutornya bagus... tp kenapa ya?
    pas saya coba captcha Nya gak muncul... kira-kira saya salah dimana ya??

  31. April 13, 2011  11:47 am by Mawaddi Reply

    mas jw gmn cara panggilnya,mungkin ada salah panggil captcha nya.

  32. April 24, 2011  8:57 am by asave Reply

    selamat pagi mas, saya mau tanya kenapa pas saya coba tombol signupnya masih tidak aktif mas..? dan bagaimana apabila validasinya tidak menggunakan captcha..?? mohon di kasih pencerahan mas... klo bisa sekalian sama scriptnya..

    terima kasih.. ^^

  34. May 23, 2011  10:08 am by ampera Reply

    Salam kenal , terima kasih ya atas ilmunya.....

  35. May 25, 2011  8:47 am by Dibyo Reply

    Mas, sy pake ini kog ga bisa ngirim ke actionnya ya??? mohon dibantu2 ya mas.....

    • June 13, 2011  9:41 pm by ibnoe Reply

      @dibyo: Codenya gimana? bs kasi contoh?

  36. August 5, 2011  12:35 am by brian Reply

    mantab mas tutorialnya, ijin mau mempelajari dan menyobanya..:-)

    • August 21, 2011  4:35 pm by ibnoe Reply

      terimakasih:)

  37. August 5, 2011  1:53 pm by Mawaddi Reply

    silahkan,dengan senang hati ;)

  38. September 13, 2011  11:16 am by holis Reply

    Udah di bookmarks tinggal dipraktekin.. 4 jempol buat Mawaddi!

  39. October 18, 2011  6:39 pm by arie Reply

    maksih mas tutorial nya... ijin ngambil :)

  40. October 26, 2011  8:08 am by mp3 indonesia Reply

    makasih infonya... semoga barokah...salam

  41. November 26, 2011  9:34 am by Restyo Reply

    terima kasih master

  43. January 6, 2012  2:02 pm by phe Reply

    kalo untuk gmn ya mas? tak echo kok g mau muncul hasilnya.thx

  44. January 6, 2012  2:04 pm by phe Reply

    kalo untuk select gmn ya mas? tak echo kok g mau muncul hasilnya.thx

    • January 9, 2012  6:19 pm by ibnoe Reply

      sama aja gan :)

  45. January 9, 2012  1:35 pm by Mawaddi Reply

    yup silahkan di unduh mas. :)

  46. February 14, 2012  10:16 am by Ariandi Reply

    Sangat Blirian,,, tp ko ga ada tgl lahir ya... pake jquery juga... mau donkkk

  47. February 19, 2012  12:08 pm by cipto Reply

    makasih sharenya,,,, ijin unduhhhh

  48. March 18, 2012  3:24 am by Afrioni Reply

    kalau untuk mengkondisikan file extensi gmn mas caranya requirednya??
    maklum masih newbie

Leave a reply

 

Your email address will not be published.

Related posts

 

Read more →
 
 

Ajax jQuery - Insert dan Delete

Setelah memahami konsep mengenai ajax di tutorial sebelumnya maka sekarang kita akan mencoba menggunakan ajax di aplikasi real. Untuk studi kasusnya kita akan membuat sebuah Twitte[...]

Read more →
 
 

JQuery SimplyTable

Semenjak kelahiran JQuery kehadiran plugin - plugin javascript berbasis jquery tanpa henti bermunculan dan semua berhasil menghiasa layar kaca monitor teman - teman semua hehehe. [...]