Cimande With jQuery validation
Feb. 26, 2010
Ini berawal ketika saya mengerjakan project dari pak frans. Awalnya saya berfikir, mungkin akan keren kalo project menggunakan cimande kemudian ditambahkan dengan fitur jQuery. Dan kemudian saya iseng untuk mencoba project yang saya kerjakan, saya tambahkan fitur jQuery validation. Dan kali ini saya akan berbagi pengalaman saya tentang Cimande dan jQuery validation.
Di bawah ini adalah screen dari project saya yang menggunakan Cimande dan jQuery validation.
Kemudian untuk langkah-langkahnya :
1. Download jQuery source, untuk mendownload dapat melalui link di sini
2. Buat folder dengan nama jQuery pada direktory /cimande-1.35-sdk/WebContent/
3. Paste dan extract file yang sudah di download
4. masukan script di bawah ini ke dalam velocity yang akan di validate
<head>
<link rel="stylesheet" href="../../jQuery/validation/formcheck/theme/abang/formcheck.css" type="text/css" media="screen" />
<SCRIPT type="text/javascript" src="../../jQuery/validation/Mootools Form Validation Example_files/core.js"></SCRIPT>
<SCRIPT type="text/javascript" src="../../jQuery/validation/Mootools Form Validation Example_files/more.js"></SCRIPT>
<SCRIPT type="text/javascript" src="../../jQuery/validation/Mootools Form Validation Example_files/en.js"></SCRIPT>
<SCRIPT type="text/javascript" src="../../jQuery/validation/Mootools Form Validation Example_files/formcheck.js"></SCRIPT>
<SCRIPT type="text/javascript">
window.addEvent('domready', function(){
new FormCheck('formular');
});
</SCRIPT>
</head>
kode di atas berfungsi untuk membaca file yang sudah didownload yang berada di direktory /WebContent/jQuery/..
5. Tambahkan script class="formular" dan id="formular" didalam script <form method="post" action="save.action">
<form method="post" action="save.action" id="formular" class="formular">
kode di atas berfungsi untuk memanggil kelas dari file yang sudah didownload.
6. Pada script input yang akan di validasi tambahkan script class="validate['required']".
<input name="......" class="validate['required']" size="15" value="......."/>
kode di atas berfungsi untuk memanggil kelas untuk validasi apabila kosong. di bawah ini validasi dengan tipe lain:
- inputan harus anggka
<input name="......" class="validate['number']" size="15" value="......."/>
- inputan harus huruf
<input name="......" class="validate['alpha']" size="15" value="......."/>
- inputan huruf dan angka
<input name="......" class="validate['alphanum']" size="15" value="......."/>
- inputan email harus benar
<input name="......" class="validate['email']" size="15" value="......."/>
- inputan berdasarkan length
<input name="......" class="validate['length[6,10]']" size="15" value="......."/>
- inputan confirm terhadap password
<input name="......" class="validate[confirm[name dari inputan]]" size="15" value="......."/>
Cukup sampai di sini pengelaman yang sudah saya lakukan moga bermanfaat. Untuk kemudian selamat mencoba... :)