Membuat Form Validasi menggunakan JQuery Inline Form Validation

Contoh Kasus:

Saya ingin membuat validasi seperti terlihat pada form dibawah ini:

Kamu bisa melihat demonya disini http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/.

Diketahui:

Saya mempunyai file add_pegawai.html yang berisi form tambah pegawai seperti dibawah ini:

Form Tambah Pegawai
Nama :
Tempat :
Tanggal Lahir :
Jenis Kelamin :
Pendidikan :
No. Telpon :
Alamat :
Struktur Direktori Web:
Direktori web saya terletak pada htdocs/php dan saat ini berisi file add_pegawai.html seperti terlihat pada gambar dibawah ini:

Kode dari file add_pegawai.html

<xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Form Tambah Pegawai</title>

</head>

<body>

<form action=”simpan.php” method=”post” id=”pegawai”>

<table width=”385″ border=”0″>

<tr>

<td colspan=”3″><div align=”center”><h1>Form Tambah Pegawai </h1></div></td>

</tr>

<tr>

<td width=”165″>Nama </td>

<td width=”6″>:</td>

<td width=”192″><label>

<input type=”text” name=”nama” id=”nama”  />

</label></td>

</tr>

<tr>

<td>Tempat Lahir</td>

<td>:</td>

<td><input type=”text” name=”tempat_lahir”  id=”tempat_lahir” /></td>

</tr>

<tr>

<td>Tanggal Lahir </td>

<td>:</td>

<td><input type=”text” name=”tempat_lahir”  id=”tanggal_lahir”  /></td>

</tr>

<tr>

<td>Jenis Kelamin </td>

<td>:</td>

<td><input type=”text” name=”jenis_kelamin” /></td>

</tr>

<tr>

<td>Pendidikan</td>

<td>:</td>

<td><input type=”text” name=”pendidikan” /></td>

</tr>

<tr>

<td>No. Telpon </td>

<td>:</td>

<td><input type=”text” name=”telpon” id=’telpon’/></td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><input type=”text” name=”alamat” /></td>

</tr>

<tr>

<td colspan=”3″><label>

<div align=”center”>

<input type=”submit” name=”Submit” value=”Submit” />

</div>

</label></td>

</tr>

</table>

</form>

</body>

</html>

Permintaan:
Saya ingin agar semua data terisi serta validasi dengan kriteria sbb:
  • Nama, hanya huruf yang bisa dimasukkan
  • tempat, hanya huruf yang bisa dimasukkan
  • tanggal lahir, harus berformat tanggal
  • pendidikan, harus diisi
  • no. telpon, hanya angka yang bisa dimasukkan
  • Alamat, hanya huruf yang bisa dimasukkan

Pertanyaan:

Bagaimana membuatnya … ?

Jawaban:

Download file yang dibutuhkan dari  http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Extractlah file tersebut

Lalu ambillah folder css dan js-nya.

Lalu masukkan folder css dan js-nya ke direktori webmu sehingga struktur direktori webmu menjadi seperti berikut ini:

Memasukkan file CSS dan JS

Masukkanlah link ke File CSS dan JavaScript pada tag <head> HTML-mu seperti berikut ini:

<head>
<script type=”text/javascript” src=“js/jquery-1.4.2.js”></script>
<script src=“js/jquery.validationEngine-en.js” type=”text/javascript”></script>
<script src=“js/jquery.validationEngine.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=“css/validationEngine.jquery.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″ />
<link rel=”stylesheet” href=“css/template.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″ />
<script type=”text/javascript”>
$(document).ready(function() {
$(“#pegawai”).validationEngine();
});
</script>
</head>

Keterangan:

$(“#pegawai”).validationEngine(), kode ini akan mencari id form yang bernama pegawai, jadi kamu harus memberikan id formmu dengan nama pegawai, validationEngine() adalah class yang akan memberikan validasi ke formmu.

Memberikan Rule ke Form Elemenmu

Syntax:

<elemenForm class=“validate[required,custom[onlyLetter]]” />

Contoh:

<input type=“text” name=“tempat_lahir” id=“tempat_lahir” class=“validate[required,custom[onlyLetter]]” />

Catatan:

Attribut name dan id harus ada pada elemen form.

JQuery inline Form Validation mempunyai beberapa rule seperti berikut ini:

  • required = Form elemen tidak boleh kosong
  • length[0,3]= Panjang inputan hanya 3 karakter, jadi kamu bisa mengganti angka 3 sesuai dengan panjang karakter yang kamu butuhkan.
  • confirm[fieldID]= menyesuaikan isinya dengan elemen form lainnya, biasa digunakan untuk konfirmasi password.
  • telephone = Menyesuaikan dengan rule regEx telephone.
  • email = Menyesuaikan dengan rule regEx email.
  • onlyNumber = Hanya angka yang boleh diinput
  • onlyLetter = Hanya huruf yang boleh diinput
  • noSpecialCharacters = Spesial Karakter tidak diperbolehkan untuk diinput
  • exemptString = tidak akan divalidasi jika stringnya sesuai.
  • date = validasi tanggal

Kode Seluruhnya pada Formmu

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Form Tambah Pegawai</title>

<script type=”text/javascript” src=”js/jquery-1.4.2.js”></script>

<script src=”js/jquery.validationEngine-en.js” type=”text/javascript”></script>

<script src=”js/jquery.validationEngine.js” type=”text/javascript”></script>

<link rel=”stylesheet” href=”css/validationEngine.jquery.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″ />

<link rel=”stylesheet” href=”css/template.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″ />

<script type=”text/javascript”>

$(document).ready(function() {

$(“#pegawai”).validationEngine();

});

</script>

</head>

<body>

<form action=”simpan.php” method=”post” id=”pegawai”>

<table width=”385″ border=”0″>

<tr>

<td colspan=”3″><div align=”center”><h1>Form Tambah Pegawai </h1></div></td>

</tr>

<tr>

<td width=”165″>Nama </td>

<td width=”6″>:</td>

<td width=”192″><label>

<input type=”text” name=”nama” id=”nama”  class=”validate[required,custom[onlyLetter]]”/>

</label></td>

</tr>

<tr>

<td>Tempat </td>

<td>:</td>

<td><input type=”text” name=”tempat_lahir”  id=”tempat_lahir” class=”validate[required,custom[onlyLetter]]” /></td>

</tr>

<tr>

<td>Tanggal Lahir </td>

<td>:</td>

<td><input type=”text” name=”tempat_lahir”  id=”tanggal_lahir”  class=”validate[required,custom[date]]”/></td>

</tr>

<tr>

<td>Jenis Kelamin </td>

<td>:</td>

<td><input type=”radio” id=”jenis_kelamin” name=”jenis_kelamin” class=”validate[required]” />Laki-laki<input type=”radio” id=”jenis_kelamin” name=”jenis_kelamin”  class=”validate[required]”/>Perempuan</td>

</tr>

<tr>

<td>Pendidikan</td>

<td>:</td>

<td><input type=”text” name=”pendidikan”  id=”pendidikan” class=”validate[required]”/></td>

</tr>

<tr>

<td>No. Telpon </td>

<td>:</td>

<td><input type=”text” name=”telpon” id=’telpon’ class=”validate[required,custom[onlyNumber]]”/></td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><input type=”text” name=”alamat” id=”alamat” class=”validate[required]”/></td>

</tr>

<tr>

<td colspan=”3″><label>

<div align=”center”>

<input type=”submit” name=”Submit” value=”Submit” />

</div>

</label></td>

</tr>

</table>

</form>

</body>

</html>

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

1 Response

  1. dorizo says:

    lumayan omz kayaknya bagus tu mau gw coba dulu omz

Leave a Reply

Your email address will not be published. Required fields are marked *