Pengecekan Inputan From Menggunakan JavaScript dan JQuery

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

Pengecekan Inputan From Menggunakan JavaScript dan JQuery 2

1. Buatlah form dengan 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:

var<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);
?>

Sekarang anda dapat mencobannya.

Pengecekan Inputan From Menggunakan JavaScript dan JQuery sudah selesai, baca juga tutorial jQuery lainnya.