Subscribe:

Rabu, 23 Mei 2012

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]

7 komentar:

Cara Mengatasi Wc Tersumbat mengatakan...

saya suka sekali dengan info info di blog ini
terimakasih

jual cover motor mengatakan...

makasih ini bacaannya bisa bikin otak yang mentok jadi encer

gantungan jilbab murah mengatakan...

heheh ternyata ada triknya juga ya untuk hal ini

grosir tempat sepatu mengatakan...

luar biasa ini ilmunya, sangat bermanfaat skali bagi yang awam

jual bibit durian mengatakan...

makasih ya mas, saya coba baca ulang soalnya masih kemebul ini

pembicara seminar motivasi mengatakan...

ijin saya lihat dan pelajari dulu ya, sepertinya ini sangat menarik

bangke mengatakan...

tulisannya kecil", jadi illfeel mau lanjut bacanya :-t b-(

Mohon Berkomentarlah dengan Baik dan Sopan
Maaf, jika ingin menyertakan url mohon di LINK saja ya (NO http://) atau komentar hanya sekedar promosi akan di hapus. Thank's ^_^

Posting Komentar