Validasi form menggunakan Plugin JQuery (validation engine)

Posted by denius in General, Jquery, Programming   2 Comments »

Ga terasa..1432 H sudah lewat, 2011 sebentar lagi juga mau minggat. Tapi blog ini tidak pernah di apdet apalagi dilihat. Yaah.. Sudah lama sekali saya tidak nulis…Mumpung masih di awal tahun hijriah dan di penghujung tahun masehi 2011,  sekalian untuk menjawab pertanyaan-pertanyaan masalah validasi di web , mudah-mudahan memberikan pencerahan. Sebenarnya untuk validasi sudah banyak sekali yang membahas, dengan berbagai macam cara, client side scripting (javascript, vbscript) maupun yang server side scripting (php, dll) atau dari skrip yang panjang sampai yang skripnya satu baris.  Validasi form bertujuan untuk memperkecil terjadinya kesalahan input oleh user. Nah… salah satu cara validasi form yang mudah, menggunakan plugin JQuery validation engine.  Sesuai dengan slogan JQuery  “Write Less, Do More” . Dengan plugin ini kita bisa memvalidasi seluruh elemen form, dengan sangat mudah tanpa perlu banyak coding.

Sebelumnya download JQuery, plugin Validation Engine

Contoh form Registrasi Mahasiswa


Pertama sisipkan JQuery, plugin validation engine, bahasa yang digunakan dan css (optional) dalam tag <head> di halaman web (saya menggunakan path relative dan lokal)

1
2
3
4
5
6

<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="../css/template.css" type="text/css"/>
<script src="../js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="../js/jquery.validationEngine.js" type="text/javascript"></script>
<script src="../js/languages/jquery.validationEngine-en.js" type="text/javascript">
</script>

Kemudian initialisasi instance untuk validasi pada form, untuk tanggal di sini saya menggunakan datepicker.

1
2
3
4
5
6

<script>
            jQuery(document).ready(function(){
                $( ".datepicker" ).datepicker();
                jQuery("#formID").validationEngine();
            });
</script>

Buat Form di dalam tag <BODY>

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
70
71
72
73
74

<form id="formID" class="formular" method="post">
<fieldset>
<legend>Registrasi </legend>
<table border="0" width="100%">
<tbody>
<tr>
<td>No.BP</td>
<td>
<input id="nobp" class="validate[required,custom[onlyNumberSp] text-input" name="nobp" type="text" /></td>
</tr>
<tr>
<td>Nama</td>
<td>
<input id="nama" class="validate[required] text-input" name="nama" type="text" /></td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>
<input id="tempat" class="validate[required] text-input" name="tempat" type="text" /></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>
<input id="tgl" class="validate[required] text-input datepicker" name="tgl" type="text" /></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input id="radio1" class="validate[required] radio" name="group0" type="radio" value="L" />Laki-laki
<input id="radio2" class="validate[required] radio" name="group0" type="radio" value="P" />               Perempuan</td>
</tr>
<tr>
<td>Alamat</td>
<td><textarea id="alamat" class="validate[required] text-input" cols="20" rows="2" name="alamat"></textarea></td>
</tr>
<tr>
<td>Email</td>
<td>
<input id="email" class="validate[required,custom[email]] text-input" name="email" type="text" /></td>
</tr>
<tr>
<td>Hobi</td>
<td>
<select id="hobi" class="validate[required]" name="hobi">
<option>Pilih Hobi</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select></td>
</tr>
<tr>
<td>Website</td>
<td>
<input id="url" class="validate[required,custom[url]] text-input" name="url" type="text" value="http://" /></td>
</tr>
<tr>
<td>Password</td>
<td>
<input id="password" class="validate[required] text-input" name="password" type="password" value="denius" /></td>
</tr>
<tr>
<td>Confirm</td>
<td>
<input id="password2" class="validate[required,equals[password]] text-input" name="password2" type="password" value="deniusaja" /></td>
</tr>
<tr>
<td></td>
<td>
<input class="submit" name="submit" type="submit" value="Submit" /></td>
</tr>
</tbody>
</table>
</fieldset>
</form>

Perhatikan pada setiap inputan form ada class yang diisi format validasi yang diinginkan oleh plugin Validation Engine, berikut jenis validasi yang saya gunakan pada form di atas.

No Jenis Validasi Penggunaan
1 Required field, field harus diisi validate[required]
2 Harus diisi dan hanya nomor, spasi validate[required,custom[onlyNumberSp]
3 Harus diisi dan dengan format email validate[required,custom[email]]
4 Harus diisi dengan format URL validate[custom[url]]
5 Isi harus sama dengan inputan lainnya validate[equals[fieldlain]]

Dan pastinya masih banyak lagi jenis validasi yang bisa digunakan  (ajax, regex,nilai Min, Max dll),  untuk lebih lengkap silahkan baca di sini.

2 Responses to “Validasi form menggunakan Plugin JQuery (validation engine)”

  1. ahmad says:
    December 16, 2011 at 9:17 am

    Wah..thx, atas tutorialnya.. sangat membantu.. sukses!!!

    Reply
  2. bandungholic says:
    May 2, 2012 at 2:24 pm

    terima kasih mas bro..
    tutorialnya sangat bermanfaat.. :)

    Reply

Leave a Reply