Membuat Validasi Form dengan Jquery

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

Artikel yang berhubungan

About Mawaddi
Nama saya Mawaddi Rachman, saya adalah seorang web developer yang berasal dari tanah jawa tepatnya batavian.

21 Responses to “Membuat Validasi Form dengan Jquery”

  1. anung says:
    May 12, 2010 at 3:32 pm

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

  2. Mawaddi says:
    May 12, 2010 at 5:22 pm

    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. anung says:
    May 12, 2010 at 9:27 pm

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

  4. anung says:
    May 13, 2010 at 11:11 am

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

  5. Mawaddi says:
    May 14, 2010 at 4:19 pm

    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. anung says:
    May 17, 2010 at 7:29 am

    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. anung says:
    May 18, 2010 at 9:31 am

    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. anung says:
    May 19, 2010 at 4:13 pm

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

  9. ibnoe says:
    May 20, 2010 at 3:11 pm

    versi php atau settinganya itu gan!!

  10. Andika Hermasyah says:
    May 21, 2010 at 1:55 pm

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

  11. Mawaddi says:
    May 24, 2010 at 9:55 am

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

  12. sala says:
    June 1, 2010 at 3:21 pm

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

  13. Mawaddi says:
    June 2, 2010 at 4:04 pm

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

  14. sala says:
    June 4, 2010 at 11:04 am

    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’

  15. habib says:
    June 25, 2010 at 2:44 pm

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

  16. zoel says:
    July 17, 2010 at 2:24 pm

    kalau untuk model select…bagai mana ya..trims

  17. Ibnoe says:
    July 19, 2010 at 4:06 pm

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

    <script>
  $(document).ready(function(){
    $("#myform").validate({
      rules: { fruit: "required" }
    });
});
</script>

    // formnya

    <form id="myform">
  <label for="fruit">Please select a fruit</label>
  <select id="fruit" name="fruit" title="Please select something!"
    <option value="">
    <option value="1">Banana</option>
    <option value="2">Apple</option>
    <option value="3">Peach</option>
  </select>
  <br />
  <input type="submit" value="Validate!" />
</form>

    *) klo mau lebih jelas bisa lihat

  18. andre says:
    August 2, 2010 at 3:19 pm

    mas .. untuk jsp bsa gak ??

  19. DolpHo says:
    August 17, 2010 at 2:43 am

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

  20. bodohsan says:
    September 1, 2010 at 3:49 pm

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

    kalo bisa gimana cara mengimplementasikan

  21. ibnoe says:
    September 3, 2010 at 11:53 am

    Bisa, tinggal di taroh di viewnya saja.


Leave a Reply

Posted on May 11th, 2010

Archived in jQuery

Written by Mawaddi

Leave a comment

Tags

, ,

Postingan Terbaru

Copyright © 2010 Tutorial PHP Jquery Codeigniter Ajax javascript