Saturday 16 February 2013

Validasi Textbox PHP - Input Kosong, Input Angka dan Input Huruf

Postingan sebelumnya ane udah bahas validasi textbox/textfield dengan C# dan java, kali ini ane bahas pake PHP, biar lengkap gan :) ...dengan menggunakan jquery untuk menvalidasi textbox/textfield HTML tanpa perlu PHP... seperti yang ane bilang dipostingan sebelumnya, PHP berbeda dengan bahasa yang lain, karena antara form dan programnya itu terpisah, jadi beda engine gitu.. form nya pake HTML kalo programnya pake PHP... pada pemrograman web sebenarnya tidak perlu menggunakan PHP untuk menvalidasi sebuah form termasuk textfield / textbox, combobox / dropdown list dan konco2nya... hehee... cukup menggunakan jQuery / plugin yang sudah disediakan programmer2 lainnya untuk menvalidasi sebuah form HTML...
kalo gak salah namanya jQuery validation.. hehee.. ya nanti ane kasi contoh programnya kok.. tenang aja... Oia kalo menggunakan jQuery validation yang ente download dari web resminya jQuery Validation kadang kurang keren gan.. :D soalnya gak disertakan css untuk validasi form.. jadi tampilannya kurang bagus gitu... kalo yang udah disediakan css nya biasanya demo nya kayak gini gan... silahkan cek dimari http://www.position-relative.net/creation/formValidator/demos/demoValidators.html
keren kan ?? oke.. langsung aje ya gan ane kasi contoh validasi Textbox / textfield kosong di PHP - HTML
pertama ente tambahkan reference javascript / JQuery dan Css nya ente bisa cari di google atau download program yang ane kasi nanti :D ..
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="validationEngine.jquery.css" type="text/css"/>  
jadi kita perlu beberapa reference yaitu :

  • jquery-1.7.2.min.js
  • jquery.validationEngine-en.js (ente nanti bisa atur bahasanya pada file ini, versi indonesia kgk ada gan :D)
  • jquery.validationEngine.js
  • validationEngine.jquery.css

nanti ane kasi semua deh di file download nya, biar ente gampang, skalian nanti ane buat versi indonesia nya... wkwkwkwkwk.... kalo udah nambah referensi sekarang saatnya melakukan validasi....
tambahkan kode ini gan
<script>
 jQuery(document).ready(function(){
  jQuery("#formID").validationEngine();
 });
</script>

kalo ente lihat pada kode diatas itu kan ada kode "#formID" itu bisa ente sesuaikan dengan id form HTML ente.. itu untuk mengaktifkan validasinya gan :D... kemudian ini contoh validasi pada form Textbox / Textfield  PHP - HTML ...

Validasi Input Kosong
<input value="" class="validate[required] text-input" type="text" name="req" id="req" />  
Validasi Input Angka
<input value="" class="validate[required,custom[integer]] text-input" type="text" name="req" id="req" />  
Validasi Input Huruf
<input value="" class="validate[required,custom[onlyLetterSp]] text-input" type="text" name="req" id="req" />  

Kalo ente lihat pada kode Validasi Textbox / Textfield diatas itu sebenernya validasi nya cuma memanggil class yang disediakan oleh Javascript/jQery dan css... sangat mudah untuk digunakan bagi yang ngerti :D .. kalo gak ngerti ya susah pastinya... wkwkwkwk.. jQuery validation tidak hanya bisa memberikan validasi input kosong, angka dan huruf.. pada PHP (Form HTML) tetapi juga menyediakan untuk validasi email, nomer telp, url, tanggal, Limit input dll... kalo mau belajar ya monggo.. tapi kali ini ane cuma kasi contoh nya validasi textbox / textfiekd input kosong, input huruf dan input angka doank... :D .. selain itu ya ente bisa mandiri kan tentunya ... hehee..
oia untuk file download program validasi input kosong, input angka dan input huruf PHP.. ada link ini... disitu untuk referensi javascript dan css nya ane bedain dengan yang ane terangin tadi soalnya ane juga kasi css untuk tampilan templatenya biar bagus... hehee bukan ane si yang nyediain tapi emang bawaan pluginnya... :D wkwkwkwkwk oke gan monggo kalo mau di download.. gratiss kok.. hehee dan smoga postingan ini bermanfaat buat kita dan para pengunjung blog ini... happy cooding ...

No comments:

Post a Comment