komputerjonri88: Cara Validasi Form dengan JQuery

Cara Validasi Form dengan JQuery

Kali ini, di blog tutorial ini saya mencoba menuliskan artikel tentang JQuery. Artikel-artikel yang akan saya tulis nantinya membahas seputar plugin-plugin jQuery. Dalam artikel ini, saya akan membahas plugin JQuery untuk memvalidasi form. Dengan adanya plugin ini, seseorang yang melakukan input ke dalam sebuah form HTML akan mengetahui komponen mana dari form yang harus diisi karena akan muncul peringatan otomatis bahwa ada komponen yang belum diisi atau format isian yang salah misalnya email atau URL.
Untuk membuat validasi form dengan JQuery, pertama yang harus Anda siapkan adalah script core jQuery nya sendiri, serta script plugin validasi formnya (jquery.validate.js). Untuk mendownload kedua script, silakan mengklik masing-masing link.
Selanjutnya kita bikin contoh formnya seperti berikut ini:
contoh.html

view source print ?

01.<html>

02.<head>

03.<title>jQuery
Validation</title>

04.<script src="jquery.js"></script>

05.<script src="jquery.validate.js"></script>

06.<script>

07.$(document).ready(function(){

08.$("#formku").validate();

09.});

10.</script>

11.

12.<style type="text/css">

13.label.error
{

14.color:
red; padding-left: .5em;

15.}

16.</style>

17.</head>

18.<body>

19.<form id="formku">

20.<table border="0">

21.<tr><td>Nama
Anda</td><td>:</td><td><input

name="nama" class="required" minlength="3" /></td></tr>

22.<tr><td>Email
Anda</td><td>:</td><td><input

name="email"

class="required
email"

/></td></tr>

23.<tr><td>Usia
Anda</td><td>:</td><td><input

name="usia"

class="required
number"

/></td></tr>

24.<tr><td>Tanggal
Lahir Anda</td><td>:</td><td><input

name="tgl"

class="required
date"

/></td></tr>

25.<tr><td>URL
Anda</td><td>:</td><td><input

name="url"

class="required
url"

/></td></tr>

26.<tr><td>Alamat
Anda</td><td>:</td><td><input

name="alamat" /></td></tr>

27.<tr

valign="top"><td>Komentar
Anda</td><td>:</td><td><textarea

name="komentar" class="required" /></textarea></td></tr>

28.</table>

29.<p>

30.<input class="submit" type="submit" value="Submit"/>

31.</p>

32.</form>

33.</body>

34.</html>

Setelah form contoh seperti di atas dibuat, jangan lupa meletakkan script jquery.js dan jquery.validate.js nya di satu folder yang sama dengan form tersebut, atau di folder manapun terserah asal path nya disesuaikan pada bagian

view source print ?

1.<script
src="jquery.js"></script>

2.<script
src="jquery.validate.js"></script>

Selanjutnya perhatikan id formnya, dalam contoh di atas adalah ‘formku’. Pastikan id formnya sama pada bagian

view source print ?

1.$("#formku").validate();

Dalam contoh form di atas saya sengaja membuat beberapa jenis isian, mulai dari teks, tanggal URL, email dan angka. Berikut ini maksud beberapa properti yang ada dalam tiap komponen form.

Properti class="required" artinya bahwa komponen tersebut harus diisi dengan format apapun.
Properti class="required email" artinya komponen harus diisi dan harus menggunakan format email.
Properti class="required number", komponen harus diisi menggunakan format angka.
Properti class="required date", komponen harus diisi menggunakan format tanggal DD/YY/YYYY
Properti class="required url", komponen harus diisi menggunakan format URL.
Properti minlength="3", maksudnya minimal jumlah karakter yang harus diisi adalah 3 karakter.

Kemudian dalam html di atas juga ada CSS seperti berikut:

view source print ?

1.<style
type="text/css">

2.label.error
{

3.color:
red; padding-left: .5em;

4.}

5.</style>

CSS tersebut digunakan untuk mengatur tampilan peringatan yang muncul jika isian form tidak sesuai dengan format yang diharapkan. Berikut ini contoh tampilan form di atas setelah diberikan jQuery untuk validasi.

.
Oya, Anda bisa juga mengubah pesan errornya sendiri. Silakan edit file jquery.validate.js nya, dan cari bagian ini:

view source print ?

01.messages:
{

02.required:
"Field ini perlu diisi.",

03.remote:
"Please fix this field.",

04.email:
"Isikan email yang valid.",

05.url:
"Isikan URL yang valid.",

06.date:
"Isikan tanggal yang valid.",

07.dateISO:
"Please enter a valid date (ISO).",

08.number:
"Isikan angka yang valid.",

09.digits:
"Please enter only digits.",

10.creditcard:
"Please enter a valid credit card number.",

11.equalTo:
"Please enter the same value again.",

12.maxlength:
$.validator.format("Jumlah maksimal {0} karakter."),

13.minlength:
$.validator.format("Jumlah minimal {0} karakter."),

14.rangelength:
$.validator.format("Please enter a value between {0} and {1} characters
long."),

15.range:
$.validator.format("Please enter a value between {0} and {1}."),

16.max:
$.validator.format("Please enter a value less than or equal to
{0}."),

17.min:
$.validator.format("Please enter a value greater than or equal to
{0}.")

18.}

Selamat mencoba ya…

komputerjonri88

Kamis, 06 Juni 2013

Cara Validasi Form dengan JQuery

Cara Validasi Form dengan JQuery

Tidak ada komentar:

Posting Komentar