Pengecekan Inputan Form Menggunakan JavaScript dan JQuery

Pengecekan inputan form dalam pemrograman web sangat penting untuk mendapatkan data yang valid untuk dimasukkan ke dalam database. Banyak metode untuk melakukan pengecekan form, salah satunya dengan PHP setelah proses submit. Namun dewasa ini pengecekan form lebih difokuskan dengan JavaScript agar pengguna tidak perlu menunggu waktu loading halaman apabila menggunakan PHP murni.

Pengecekan dengan JavaScript sedikit lebih rumit namun dengan plugin Validation Engine darijQuery, semua jadi lebih mudah. Dengan plugin Validation Engine, setiap inputan form dapat anda definisikan ingin diberi pengecekan seperti apa dan alert akan muncul di dekat inputan tersebut ketika validasi salah, berikut adalah contoh screenshot-nya:

Pertama-tama, siapkan form:

<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><textarea name="alamat" id="alamat"   rows="3" cols="30" class="validate[required]"></textarea></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:

<?

$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);

?>

Pengembalian nilai Ajax harus berupa JSON array numeric, pada contoh diatas akan menghasilkanJSON seperti berikut:

["NIM",true] atau ["email",true]