Baru - baru ini saya dapat tugas dari kantor membuat web yang tujuannya membantu para pekerja lainnya untuk input data. Sebenarnya konsep dari web itu sendiri sangat simple, mungkin hanya insert, update, dan delete aja. Tapi tentunya pengguna web nantinya harus mengisi inputan dengan valid. Misalnya saja ada inputan nomor handphone yang hanya boleh diisi angka, atau misalnya juga ada inputan yang harus diisi. Awalnya saya menggunakan validasi manual dari script php. Wah ternyata yang saya temukan adalah banyak kelalaian dalam pengerjaannya, belum lagi kalau terdapat banyak page yang harus di validasi, tentu saja memakan banyak waktu dan ruang :p.
Kemudian berangkat dari pengalaman tersebut, saya saling sharing dengan teman seperguruan, saya ceritakan kesulitan - kesulitan yang saya temui ditengah jalan. Alhasil mas Agung Darmanto, teman baik saya ternyata punya cara yang lebih simple dan mudah digunakan. Dia menyarankan saya untuk menggunakan JQuery. Awal mendengar kata JQuery saya langsung berpikir yang sulit - sulit, pasti temen - temen yang baca juga mikir gitu toh? Ternyata setelah tahu, wah gampang banget wes pokoknya. Lihat aja slogan dari JQuery itu sendiri, "Write Less, Do More", jelas toh?!. Uda siap buat belajar validasi menggunakan JQuery? Oke, ikutin langkah yang saya terangkan di bawah ya.
1. Download file jquery di sini
2. Simpan file tersebut di localserver kita
3. Sekarang sisipkan script di bawah ini pada tag head (<head>di sini</head>)
<script src="lib/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#demo").validate();
})
</script>
<style>
label.error {
color:red; font-family:Arial; font-size:10px; display:block;
}
</style>
<script type="text/javascript" src="lib/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#demo").validate();
})
</script>
<style>
label.error {
color:red; font-family:Arial; font-size:10px; display:block;
}
</style>
4. Nah, sekarang kita beralih ke bagian textfield atau textarea yang akan kita validasi. Tambahkan script "class=required" untuk validasi harus diisi, dan gunakan script "class=required number" untuk validasi harus angka. Ingat kedua script tersebut harus berada dalam tag input.
<input type="text" name="namatextfield" class="required" />
5. Sekarang tinggal kita coba deh. Mudah kan caranya, pastinya juga ga ribet
Catatan : #demo, itu adalah nama form yang akan divalidasi, sesuaikan nama form dengan script tersebut
Ternyata semua ini mudah jika kita berhasil memahami. Untuk tambahan aja, nanti kalau textfield yang divalidasi ternyata menemukan kesalahan inputan (tidak diisi, atau inputan bukan angka), maka akan muncul warning di bawah textfield tersebut. Tulisan warning tersebut bisa kita ubah sesuai keinginan kita. Mudah kok, caranya tinggal tambahkan aja title="pesan yang diinginkan" di dalam tag input. Untuk mengganti posisi pesan kesalahan, kita ubah aja di bagian CSS yang saya tuliskan di atas. Caranya, hapus tulisan display:block;. Sebenarnya untuk default posisinya memang berada di samping.
Tutorialnya sampai di sini dulu yah, ntar kalau ada ilmu lagi pasti saya shared. Jangan lupa komen kalau berkenan. Terima kasih kawan.
0 komentar:
Posting Komentar