Cara Validasi Form dengan JQuery ~ PHP

10/04/2013 09:40:00 am 3 comments


Untuk membuat validasi form dengan JQuery, pertama yang harus Anda siapkan adalah script core jQuery nya, serta script plugin validasi formnya jquery.validate.js. Untuk mendownload kedua script, silakan mengklik masing-masing link yang terdapat di akhir artikel.
Selanjutnya kita bikin contoh formnya seperti berikut ini:

contoh.html
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><inputname="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><inputname="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><inputname="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 sourceprint?
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 sourceprint?
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 sourceprint?
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 sourceprint?
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 …

 Download   jquery.validate.js. dan JQuery 

Categories:

3 comments:

Subscribe to: Post Comments (Atom)
Subscribe to RSS Feed Follow me on Twitter!