Pengecekan Inputan From Menggunakan JavaScript dan JQuery

Form validationsangat penting untu mengecek validnya data yang akan nanti masuk ke dalam data base. untuk itu sekarang kita akan belajar bagaimana membuat sebuah form alidation dengan JavaScript dan jQuery, dengan plugin form validation yang ada di
jQyery anda tidak perlu mengklik submit erlebih dahulu untuk mengecek apa inputan anda benar atau tidak, namun ia akan memberikan balon pemberitahuan ketika kita slah dalam mengisinya :

1. Buatlah form denga script seperti ini :

<form action="save.php" method="post" id="formMhs"><h2>Daftar Mahasiswa Baru</h2><table><tr> <td>NIM</td> <td>:</td> <td><input type="text" name="NIM" id="NIM" class="validate[required,custom[onlyNumber],length[10] ,ajax[ajaxCheckNIM]]" size="10" /> <small>* max char: 10</small></td> </tr><tr> <td>Nama</td> <td>:</td> <td><input type="text" name="nama" id="nama" class="validate[required]" size="30" /></td> </tr><tr> <td>Jenkel</td> <td>:</td> <td> <input type="radio" name="jeniskelamin" id="jeniskelamin1" class="validate[required]" value="pria" /> Pria <input type="radio" name="jeniskelamin" id="jeniskelamin2" class="validate[required]" value="wanita" /> Wanita </td> </tr><tr> <td>Tgl Lahir</td> <td>:</td> <td><input type="text" name="tgllahir" id="tgllahir" class="validate[required, custom[dateFormat]]" size="10" /> <small>* yyyy-mm-dd</small></td> </tr><tr valign="top"> <td>Alamat</td> <td>:</td> <td><text.area name="alamat" id="alamat" rows="3" cols="30" class="validate[required]"></text.area></td> </tr><tr> <td>Email</td> <td>:</td> <td><input type="text" name="email" id="email" class="validate[custom[email],ajax[ajaxCheckEmail]]" size="25" /></td> </tr><tr> <td>Jumlah SKS</td> <td>:</td> <td><input type="text" name="jumlahsks" id="jumlahsks" class="validate[min[10],max[24]]" size="3" /> <small>* minimal 10, maksimal 24</small></td> </tr><tr> <td>Website</td> <td>:</td> <td><input type="text" name="website" id="website" class="validate[custom[url]]" size="30" value="http://" /></td> </tr><tr valign="top"> <td>Pilih Mata Kuliah</td> <td>:</td> <td> <input type="checkbox" name="matakuliah[]" id="matakuliah1" class="validate[required]" value="Programming" /> Programming<br /> <input type="checkbox" name="matakuliah[]" id="matakuliah2" class="validate[required]" value="Kalkulus" /> Kalkulus <br /> <input type="checkbox" name="matakuliah[]" id="matakuliah2" class="validate[required]" value="Logika Matematika" /> Logika Matematika<br /> <input type="checkbox" name="matakuliah[]" id="matakuliah2" class="validate[required]" value="Bahasa Inggris" /> Bahasa Inggris </td> </tr><tr> <td>Masukkan Password</td> <td>:</td> <td><input type="password" name="password" id="password" class="validate[required]" size="10" /></td> </tr><tr> <td>Ulangi Password</td> <td>:</td> <td><input type="password" name="password2" id="password2" class="validate [required,equals[password]]" size="10" /></td> </tr></table><input type="submit" name="submit" value="Simpan" /><input type="reset" value="Batal" id="btnReset" /></form>

Perhatikan pada setiap inputan form ada class yang diisi format validasi yang diinginkan oleh plugin Validation Engine, berikut adalah beberapa format validation yang dipakai pada form diatas.

No	Jenis Validasi	Penggunaan
1	Required field, field harus diisi	validate[required]
2	Menentukan panjang karakter	Harus 10 karakter: validate[length[10]] Dari 0 s/d 10 karakter: validate[length[0,10]]
3	Harus diisi hanya nomor	validate[custom[onlyNumber]]
4	Harus diisi dengan format tanggal	validate[custom[dateFormat]]
5	Harus diisi dengan format email	validate[custom[email]]
6	Harus diisi dengan format URL	validate[custom[url]]
7	Menentukan jumlah karakter minimal	validate[min[5]]
8	Menentukan jumlah karakter maksimal	validate[max[5]]
9	Isi harus sama dengan inputan lainnya	validate[equals[fieldlain]]
10	Memanggil validasi Ajax	validate[ajax[namaValidasiAjax]]

Apabila ada form yang ingin dimasukan validasi lebih dari satu maka penggunaannya adalah sebagai berikut:

<input type="text" name="nim" id="email" value="validate[required,custom[onlyNumberSp],length[10]]" />

Setelah mendefinisikan jenis validasi di masing-masing inputan form, maka jalankan perintah ini untuk menambahkan fungsi dari plugin Validation Engine di form anda:

$('#formMhs') .validationEngine() // fungsi untuk menambahkan feature validation ke form .ajaxForm({ // ketika validasi berhasil, inputan form akan dikirim via ajax dengan plugin jQuery ajax form success: function(response){ alert(response); $('#btnReset').click(); // kosongkan form setelah selesai menyimpan data } });

Validation Engine juga dapat melakukan pengecekan via Ajax, yaitu dengan menambahkan key validasi ajax sebelum pemanggilan fungsi diatas.

$.validationEngineLanguage.allRules['ajaxCheckEmail'] = { "url": "check.php", // URL ajax "alertText": "* Email ini sudah ada sebelumnya", // alert text apabila ajax mengembalikan false "alertTextOk": "* Email tersedia", // alert text apabila ajax mengembalikan true "alertTextLoad": "* Sedang proses check Email" // alert text ketika proses pengecekan ajax sedang berlangsung }

Pada form masukan key `ajaxCheckEmail` ke class inputan form:

<input type="text" name="email" id="email" value="validate[custom[email],ajax[ajaxCheckEmail]]" />

Lalu pada target URL ajax, lakukan pengecekan seperti berikut:

<.?php $field = $_GET['fieldId']; // kiriman dari plugin Validation Engine yang berisi nama form yang ingin di cek $value = $_GET['fieldValue']; // kiriman dari plugin Validation Engine yang berisi nilai form require_once 'connect.php'; $query = "SELECT * FROM mahasiswa WHERE $field = '$value'"; $ditemukan = mysql_num_rows(mysql_query($query)) > 0; $result = array($field,!$ditemukan); echo json_encode($result); ?>