Validate Form with Jquery

Posted on

Masih ingat dengan artikel saya sebelumnya yaitu validasi javascript. Nah jika sebelumnya kita harus membuat validasi ini sebanyak form yang kita miliki, maka beberapa waktu lalu saya berfikir mau mencari cara memvalidasi form yang saya miliki dengan satu function saja. Akhirnya Jquery lah jawabannya.

Jquery sendiri sebenarnya adalah sebuah library javascript yang memungkinkan kita untuk membuat program web dengan memanfaatkan library javascript yang disediakan (didalam jquery), tanpa harus secara eksplisit kita menambahkan event atau pun properti pada halaman web tersebut.

JQuery merupakan salah satu library yang membuat program web di sisi klien (Client Side), tidak terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut. (Seperti yang saya lakukan saat membuat validasi javascript sebelumnya).

validasi jquery

Oke, intinya dengan Jquery ini saya akan membuat proses validasi (validate) pada program yang akan saya buat menjadi lebih sederhana. Saya hanya mendefinisikan 1 kali dan selanjutnya akan saya panggil pada form-form yang saya miliki. (Betapa mudah & sederhananya bukan…)

Dalam contoh ini saya menggunakan plugins validate jquery yang dapat didownload langsung dari websitenya

http://bassistance.de/jquery-plugins/jquery-plugin-validation

Didalam file index.php atau tergantu dalam file utama program web kita, sisipkan script berikut ini untuk me-load jquery dan plugins jquery validate dan letakkan di bagian head.

<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script>

Selanjutnya buat script validasinya

<script type="text/javascript" language="JavaScript">// <![CDATA[
	$(document).ready(function() {
		$("#myform").validate();
	})
// ]]></script>

Catatan : $(“#myform”) adalah id form yang akan kita validasi.

Contohnya adalah sebagai berikut

<form id="myform" action="proses.php" method="POST"></form>Contoh form yang akan divalidasi
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" language="JavaScript">// <![CDATA[
	$(document).ready(function() {
		$("#myform").validate();
	})

// ]]></script>
<h2>Add New User</h2>
<form id="myform" action="proses.php" method="POST">
<table class="data">
<tbody>
<tr>
<td class="ldata">Username</td>
<td class="data">: <input class="required" type="text" name="id_user" /> *</td>
</tr>
<tr>
<td class="ldata">Password</td>
<td class="data">: <input class="required" type="password" name="password" /> *</td>
</tr>
<tr>
<td class="ldata">Full Name</td>
<td class="data">: <input type="text" name="full_name" size="30" /></td>
</tr>
<tr>
<td class="ldata">E-mail</td>
<td class="data">: <input type="text" name="email" size="30" /></td>
</tr>
<tr>
<td class="ldata">Level</td>
<td class="data">: <input type="radio" name="level" value="1" />Full Control <input type="radio" name="level" value="2" />Write &amp; Delete (Except Manage User) <input type="radio" name="level" value="3" checked="checked" />Read Only</td>
</tr>
<tr>
<td class="data" colspan="2"><input type="submit" value="Save" /> <input onclick="self.history.back()" type="button" value="Abort" /></td>
</tr>
</tbody>
</table>
</form>

Untuk memvalidasi field tertentu kita dapat mensisipkan class=”required” agar pada saat tombol submit (Save) diklik maka jquery validate akan memvalidasi field tersebut. Jika field tersebut bernilai kosong makan warning berwarna merah akan dimunculkan dan memberitahukan bahwa field tersebut harus diisi.

untuk meng-kostumisasi pesan warningnya, dapat disisipkan pada field seprti dibawah ini

<input class="required" title="username harus diisi" type="text" name="id_user" />

Proses validasi dengan plugins jquery validate ini dapat digunakan pada semua jenis element form seperti radio button, checkbox, textarea, select option, dan lain-lain. Anda juga bisa mengembangkannya lebih lanjut untuk memvalidasi hal-hal yang lebih kompleks, seperti validasi alamat email, validasi alamat URL, validasi jumlah minimal & maksimal karakter, validasi jenis file yang akan di upload, dan lain sebagainya. Untuk itu Anda dapat membaca manual/dokumentasi pada web resminya.

Semoga bermanfaat.

5 comments

  1. jQuery memiliki harus menjadi satu di bantu terbaik untuk penciptaan halaman web mudah. Kebanyakan orang tidak menyadari bahwa. Ada banyak contoh gratis di internet bagaimana jQuery dapat digunakan.

    Hal yang baik tentang itu adalah bahwa semua kode dalam bahasa Inggris. Aku mungkin harus menggunakan penerjemah untuk memahami bahasa Indonesia Anda. Dan, saya dapat berbicara bahasa Portugis karena itu adalah bahasa dari pulau Madeira. Tapi, dalam komputasi, semua orang mengerti sedikit bahasa Inggris.

    Salam dari kota rumah saya Funchal dan terima kasih untuk meningkatkan kesadaran jQuery.

    jQuery has got to be one on the best aids to easy webpage creation. Most people do not realise that. There are lots of free examples on the Internet how jQuery can be used.

    The good thing about it is that all the code is in English. I may have to use a translator to understand your Indonesian. And, I may speak Portuguese because that is the language of the island of Madeira. But, in computing, everybody understands some English.

    Greetings from my home city of Funchal and thank you for increasing the awareness of jQuery.

  2. mas mw tnya..
    misalnya ada studi kasus disebuah perusahaan ttg permohonan kenaikan pangkat.
    krywan yg mw mngajukan knaikan pangkat hrs dwnload format dokumen nya dan diisi. setlah itu dkumen hrs diupload untk dvalidasi sama atasanny, msalnya supevsor n manager.
    apa validasi smcam itu sma kyk validasi yg diatas.?
    klo gx sama mhon bntuannya mas..
    trimakasih..

    1. oh, yang saya tulis di atas bukan seperti validasi seperti itu.

      kalau validasi seperti yang dimaksut mas freeze maksut, mungkin perlu ada mekanis me untuk pihak supervisor dapat memvalidasi keabsahan dukumen yg di upload oleh karyawan…

Leave a Reply to freeze Cancel reply

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