Membuat form input pada aplikasi web bukanlah hal yang rumit. Namun yang terpenting form itu mudah digunakan dan jelas cara pengisiannya. Salah satunya adalah dengan menggunakan validator form. Sehingga data yang diinputkan oleh user, bisa langsung diketahui jika ada kesalahan.

Mau tau cara mudah nya dengan menggunakan bantuan jQuery?

Untuk memulainya, Anda hanya membutuhkan source javascript berikut,

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery.validate.js'></script>

Source tersebut bisa Anda dapatkan di jQuery dan Plugin jQuery Validation. Source tersebut berisi library javascript yang akan kita gunakan. Silahkan di load kedua source tersebut pada halaman HTML yang memuat form dan validasinya. Kedua library ini seminimal mungkin membutuhkan modifikasi pada form HTML nya, sehingga Anda akan semakin mudah menggunakannya karena hanya tinggal men-set parameter2 pada script jQuery nya saja. Sebelum mencoba disarankan Anda untuk melirik-lirik situs resmi dari plugin ini,

• http://jquery.bassistance.de/validate/demo/
• http://docs.jquery.com/Plugins/Validation
• http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Langkah 1: membuat Form

Mari kita mulai dengan membuat Form input untuk pendaftaran Peserta, dengan requirement seperti berikut ini.

1. Nama, terdiri dari 5-20 karakter.
2. Password, max 10 karakter.
3. Email, sesuai alamat email
4. Tanggal Lahir, sesuai format tanggal
5. Jenis Kelamin, terdiri dari pilihan Pria dan Wanita.
6. Alamat Kos, karakter bebas, harus diisi.
7. Kota, Pilihan kota (Bandung, Semarang, Jakarta, Medan).
8. Kode pos, input kodepos dalam bentuk Angka.

Agar bentuk form menjadi rapih dan bagus, silahkan gunakan table, label dan style lainnya.

<h2>Pendaftaran Peserta Baru</h2>
<form action="simpan.html" method="POST" id="daftar">

<table>
<tr>
 <td><label for="nama">Nama</label></td>
 <td><input type="text" id="nama" name="nama" /></td>
</tr>
<tr>
 <td><label for="pass">Password</label></td>
 <td><input type="password" id="pass" name="pass" /></td>
</tr>
<tr>
 <td><label for="mail">Email</label></td>
 <td><input type="email" id="mail" name="mail" /></td>
</tr>
<tr>
 <td><label for="tgl_lahir">Tanggal Lahir</label></td>
 <td><input type="date" id="tgl_lahir" name="tgl_lahir" /></td>
</tr>
<tr>
 <td><label for="jk">Jenis Kelamin</label></td>
 <td>
 <input type="radio" id="jk" name="jk" value="boy" />
 Laki-laki
 <input type="radio" id="jk" name="jk" value="girl"/>
 Perempuan
 </td>
</tr>
<tr>
 <td><label for="alamat">Alamat Kos</label></td>
 <td><textarea id="alamat" name="alamat">
 </textarea></td>
</tr>
<tr>
 <td><label for="kota">Kota</label></td>
 <td>
 <select id="kota" name="kota">
 <option value="bandung">Bandung</option>
 <option value="jakarta">Jakarta</option>
 <option value="medan">Medan</option>
 </select>
 </td>
</tr>
<tr>
 <td><label for="kdpos">Kodepos</label></td>
 <td><input type="text" id="kdpos" name="kdpos" /></td>
</tr>
<tr>
 <td colspan="2" align="center">
  <input type="submit" value="Daftar"></td>
</tr>
</table>

</form>

Langkah 2: Tambahkan jQuery Validation

Kemudian Anda bisa menggunakan script plugin. Berikut ini contoh sederhana penggunaan script jQuery Validation.

<script type="text/javascript">
 $(document).ready(function() {
  $("#daftar").validate({
   rules: {
    nama: {
      required: true,
      rangelength:[5, 20],
      },
    email: {
      required: true,
      email: true,
      },
    },
 });
})
</script>

Anda cukup men-set untuk form dengan ID “daftar”, ditulis dengan “#daftar”. Sedangkan untuk masing-masing form input, Anda langsung bisa menuliskan nama ID dari input form. Kemudian, Anda bisa set atribut validasinya, seperti untuk required, minlength, maxlength, rangelength, min, max,range, email, url, date, number, digits, dan creditcard.

Anda juga dapat mengubah pesan error pada validasi form tersebut dengan tulisan sendiri, seperti contoh berikut ini. Letakkan script tersebut setelah penulisan “rules”.

messages: {
 nama: {
 required: "Kolom nama harus diisi",
 rangelength: "Error! Kolom nama terdiri dari 5-20 karakter"
 },
 email: {
 required: "Alamat email harus diisi",
 email: "Error! Format email tidak valid"
 }
 },

Info lebih lengkap, silahkan lihat contoh source nya di http://docs.jquery.com/Plugins/Validation. Silahkan kerjakan langkah selanjutnya, sesuai requirement form.

Penggunaan Plugin ini akan jauh lebih memudahkan dibandingkan dengan penggunaan native HTML5 untuk validasi dan Javascript.

selamat mencoba 😀