Ada banyak cara memvalidasi form berbasis web, namun cara yang paling simple dan menarik menurut penulis adalah menggunakan jQuery, lebih tepatnya menggunakan jquey Plugin bernama JQuery validate.
Untuk penggunaan jquery validate ikuti langkah berikut :
1. Download Jquery.js dan jquery.validate.js
2. Include-kan file js tersebut ke dalam tag <head> di HTML seperti berikut
<head> <title>Sample Validasi</title> <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.validate.js"></script></head>3. Tuliskan script untuk menjalankan validasi di form
<script type="text/javascript">$(document).ready(function() { $("#form").validate(); //id form});</script>4. Buat sintak HTML nya
<form id="form" method="post" action="proses.php"> <label for="nama">Name</label> <input id="nama" name="nama" size="25" class="required" minlength="2" /><label for="umur">umur</label> <input id="umur" name="umur" size="25" class="required number" /> <label for="email">E-Mail</label> <input id="email" name="email" size="25" class="required email" /> <input class="submit" type="submit" value="Daftar"/> </form>Untuk menempelkan validasi di tiap inputan atau tag <input>, kita harus menambahkan nama class seperti di sintak di atas. Berikut penjelasan nama class untuk validasi,
required, inputan tersebut wajib diisi.
number, yang diinputkan harus angka tidak boleh huruf.
email, yang diinputkan harus berformat email misalnya : nama@mail.com
Berikut sintak keseluruhan untuk menjalankan validasi di form inputan
<html><head> <title>Sample Validasi</title> <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.validate.js"></script><script type="text/javascript">$(document).ready(function() { $("#form").validate(); //id form});</script></head><body><form id="form"> <label for="nama">Name</label> <input id="nama" name="nama" size="25" class="required" minlength="2" /><label for="umur">umur</label> <input id="umur" name="umur" size="25" class="required number" /> <label for="email">E-Mail</label> <input id="email" name="email" size="25" class="required email" /> <input class="submit" type="submit" value="Daftar"/> </form></body></html> Untuk lebih memahami bisa dilihat di link Berikut.
Semoga bermanfaat..
0 Komentar