jQuery Validation adalah sebuah plugin jQuery yang berfungsi untuk mempermudah validasi form client-side. Cara penggunaannya adalah dengan memanggil script jquery dan jquery-validate di dlm kode html anda (biasanya diletakkan di bagian head) :
1 2 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> |
Ketikkan script validate nya:
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function() { $("#myForm").validate(); }) </script> |
Di mana myForm adalah id dari form yg akan divalidasi.
1 | <form id="myForm" method="post"> |
Kemudian di bagian input yg akan kita beri validasi tambahkan class=”required”
1 2 3 4 | Nama: <input type="text" name="nama" class="required" /> Alamat: <input type="text" name="alamat" class="required" /> |
Jika field masih kosong, kemudian kita tekan tombol submit, maka akan muncul peringatan bahwa field tsb harus diisi, dan form tidak akan di submit.
Pesan yang muncul di sebelah kanan input “This field is required.” itu adalah pesan default. Pesan tersebut bisa kita ganti dengan menambahkan attribute title di input, misalnya:
1 | <input type="text" name="nama" class="required" title="Nama harus diisi" /> |
Maka pesan akan berganti menjadi pesan anda sendiri.
Validasi menggunakan jQuery Validation Plugin juga bisa diterapkan di semua jenis input, seperti radio button, checkbox, textarea, select option, dan lain-lain. Anda juga bisa menambahkan validasi yang lebih kompleks, seperti pengecekan alamat email, pengecekan URL, pengecekan jumlah minimal & maksimal karakter, pengecekan jenis file yang akan di upload, dan lain-lain.
Anda bisa mendownload source code nya di sini:
CATATAN: Validasi form menggunakan javascript/jQuery hanya berguna untuk mempermudah proses pengisian form, namun tidak akan melindungi aplikasi web anda. Untuk keamanan yang lebih baik, anda tetap harus menambahkan validasi secara server-side.
Sips…
Tapi kalo malas coding di function -nya… bisa-bisa web kita dianggap tidak valid ama web validator
so.. jangan malas codingnya….
heheheh.. asal masih pake attribute class dan title kan masih valid. kalau ada attribute2 aneh (seperti equalTo, minlength, rangeLength, dll) baru ditaruh di function
pa gimana sih scrip buat validasi kaya gini:
1 m x 1 m di php
it’s mantap buat mempermudah… ai…
thx peryMuch
wah mana neh es teh nya…. maksudnya class2 yg laen
oy GPL yo…!!
es teh beli di warung sebelah aja..
class2 laen menyusul
Salam kenal…
mungkin bisa validasi dengan menghide buton terlebih dahulu.
setelah lengkap baru button ditampilkan
thank’s infonya
kalau menurut saya validasi form sebaiknya dilakukan secara server side karena akan lebih aman :::::
validasi dengan javascript tetap bisa ditembus dengan mudah apalagi jika javascript di browser tidak aktif:::
iya benar mas, yg paling penting memang validasi secara server side (makanya kan sudah saya tulis di catatan :D
tapi tidak ada salahnya kita juga menambahkan validasi secara client side demi kenyamanan pengisi form
jadi misalnya seseorang keliru mengisi form.. dia tidak perlu menunggu data dikirimkan ke server terlebih dulu hanya untuk menampilkan pesan error nya
dan apabila javascript tidak aktif pun form tetap tervalidasi
Mas wibowo,
kalo sudah di validasi, terus simpan datanya ke MySQL gimana mas ?
Thanks
contoh di atas hanya untuk mendemokan validasinya saja, belum ada script untuk menyimpan data ke database
script utk insert ke mysql contohnya seperti ini:
mas kalo pengen di kasih CAPTCHA gimana ya…?
mohon info nya
terima kasih
sayangnya plugin validation ini tidak bisa membuat captcha.. biasanya utk meng generate captcha yg berupa gambar menggunakan script server side (misalnya php). anda bisa mendownload class captcha di phpclasses.org
Thanks for sharing Bro…!!
klo triger nya bukan dari submit gmn ya caranya. aku pake script spt ini ga jalan.
$(‘#btn_save’).click(function(){
$(‘#myForm’).validate();
});
mohon bantuanya.
TIA
sudah coba trik ini? :
ok – ok problem solved thanks ya..
mas gatot keren…
sayang aku cowok..
lho mas danang.. pengen jadi cewek to?
Mas, tutorialnya bermanfaat sekali. Terima kasih. Btw, mau tanya, kalo form sama proses validasi digabung, data yang diambil hanya dari form validasi. Kalo saya coba pade “data”, html nya ikut ke baca. Misal
Input
Maksudnya mau jika validasi berhasil, AJAX melakukan “A” jika gagal melakukan “B”. Terima Kasih
wah maaf mas, tagnya di strip_tag maksudnya tadi mau nulis. Misal
Mas, tutorialnya bermanfaat sekali. Terima kasih. Btw, mau tanya, kalo form sama proses validasi digabung, data yang diambil hanya dari form validasi. Kalo saya coba pade “data”, html nya ikut ke baca. Misal
html
Head
title Validasi /title
/head
body
?
// Disini Form
echo ” Form Pendaftaran”;
// Disini Validasi
echo ” Validasi”;?
/body
/html
Mas agus, maaf saya belum jelas maksud pertanyaannya gimana
Artikel ini hanya proses validasi saja, tidak ada proses menggunakan ajax. Kalaupun ditambahi proses submit menggunakan ajax, prosesnya akan terpisah dari validasinya. Jadi submit ajaxnya baru dijalankan setelah formnya sudah valid semuanya.
mas, ini maksudnya gimana ya
$(‘#myForm’).validate();
$(‘#btn_save’).click(function() {
$(‘#myForm’).submit();
});
apakah di input type submit dikasih id=btn_save
atau gimana mohon pencerahannya, aku dah coba dengan input type submit dan dikasih id=btn_save tapi tidak mau melakukan proses.
yg #btn_save itu id dari input type=”button”, bukan input type=”submit”
kalo pake type submit udah otomatis
sip mas dah solved.
he..he.. maaf mas, pemula soalnya. Maksudnya, validasinya diserver mungkin pake post, kondisinya:
1. misal jika validasi benar, muncul tanda centang di sebelah kanan input box.
2. script validasinya satu script sama script form, lengkap dengan tag2 html, head body, dsb.
masih bingung ya, he…
Saya rasa lebih efektif pakai script client-side untuk memunculkan tanda centang (berupa gambar) setelah inputnya terisi dengan benar. Pakai jQuery bisa juga sih, tapi harus menambah script sendiri, di plugin validation belum ada utk itu.
mas.. gimana caranya buat validasi karakter tertentu dari suatu input form.. contoh :
user inputnya : syafi’i
nah.. saya pengennya si user ga boleh menginput karakter ‘
jadi setiap user menginput karakter ‘ itu ga bisa… thanx mas gatot…
di plugin validation ini kita bisa menambahkan rule sendiri kalau misalnya belum ada rule yang sesuai
contohnya (dari situs ini), rule supaya input hanya mengandung huruf saja:
Good work! Thank you very much!
I always wanted to write in my blog something like that. Can I take part of your post to my site?
Of course, I will add backlink?
Regards, Your Reader
Yes, you can use part (but not all) of this article for your site.
tp krn sifatnya cliend side, kodenya bisa di modif y .. ?
iya bisa dimodif.. maka itu lebih aman kalau kita juga menggunakan validsi server side
Mas,klo misalkan saya buat form registrasi..Trus misalkan field yang lain udah diisi,tapi ternyata field pwd 1 ma pwd 2 ga sama,pada saat disubmit,nilai2 di field yang lain kehapus ga??Thanks
kalo pake validasi client side nilai2 di field lain ga ikut kehapus kok, soalnya kan formnya blm disubmit/belum berganti halaman
Hi. Your site displays incorrectly in Opera, but content excellent! Thank you for your wise words
Mas, kalo saya ingin buat 1 contact form yg bisa send message ke email yg sudah di defined dengan
menerapkan tutorial ini gimana ya?
Yang di atas hanya melakukan validasi apakah ada field yang masih kosong atau tidak.
Nah setelah semoanya valid atau diisi, sy maonya bs lgsg send data2 tersebut ke email saya..
Thx
bisa saja mas, anda tinggal menggunakan fungsi
mail()nya phpcontoh sederhananya begini:
kalo mau lebih mudah, saya sarankan menggunakan class seperti phpmailer
ok mas.. tar dicoba..
thx ya..
mas klo mau memvalidasi password n retype password gmn?
validasi untuk password biasanya seperti ini:
aku dpt form validator yg keren http://mootools.floor.ch/en/demos/formcheck/index.htm basisnya mootools
ada yg tau versi jquery nya?
trims
mas. mau tanya. gimana caranya setelah data disubmit dan form divalidasi secara server side, kemudian jika sukses maka form akan kosong dan siap untuk diisi kembali?
form setelah disubmit otomatis akan kosong kembali
mas Bowo,
kalo buat membatasi pengisian supaya masing2 kata tidak lebih dari jumlah digit yg diinginkan gimana ?
misal pengisian harus max 5 digit :
* pengisian yg valid ==> boleh, valid, cocok
* pengisian yg tidak valid ==> tidakboleh, unvalid, takcocok
pake ini mas fariz:
Gimana kalo membatasi jml karakter di textarea di wordpresss?
??????????? ?????? ? ???????????? ???????????????? ? ?????? – ???? ?? ?????? ????????????????? ?????? ?????????? ???????????? ??????: ??????? ?????, ??????????? ?????, ??????????? ?????, ?????????????? ?????, ???????? ?????.
mas gatot…kalo pengen textfieldnya hanya boleh diisi angka atau huruf saja…validasinya dimana mas…thx
karena blm ada rule tsb, maka tambahkan rule sendiri spt ini:
saya ada masukkin validasi equalTo..
untuk retype password sama dengan passwordnya..
sudah saya masukkan dengan nilai yang sama tapi kenapa selalu errornya muncul ya?
“please enter the same value again”
tolong bantuannya.. thanx
apakah scriptnya sudah seperti contoh ini?
mas saya pemula baneget dalam bidang ini, saya mau tanya mas , gimana kalo insert ke database dan setelah di tekan proses tidak muncul ke halaman actionnya melainkan tetap di halaman formnya tetapi di situ muncul teks notifikasi bahwa proses insert tersebut sudah berhasil, mohon bantuannya ya….
saya sangat pemula banget di bidang ini, mas sya mau tanya gmna kalo kita insert ke database dan setelah di klik proses tidak muncul ke halaman actionnya melainkan tetap di halaman formnya tetapi di situ nanti ada teks notifikasi bahwa proses insernya itu sudah berhasil,,,
mophon bantuanya,,
anda bisa menggunakan redirect pada file action nya setelah proses insertnya berhasil agar kembali ke halaman form, gunakan script redirect seperti ini:
atau gunakan form berbasis ajax seperti tutorial ini
kalo form autocomplete bgm mas ? trus bgm agar user tidak boleh mengisi data selain data yang muncul di form auto complete tsb ?
thanks n Gbu
kalau autocomplete prosesnya berbeda karena ada proses searching ke database menggunakan ajax.. mungkin lain kali akan saya berikan tutorialnya
agar user tidak bisa mengisi data sembarang, kita bisa menambahkan atrtibute readonly pada inputnya
ok siip.. mas bowo, salam kenal…. perbanyak mas tutorialnya….
mas untuk validasi jika kita menginputkan data tp datanya udah ada di database?
untuk pengecekan ke database sepertinya lebih mudah menggunakan form berbasis ajax seperti tutorial ini
pak coba kirimmin contoh untuk validasi email
yang sudah jadi plus dengan script simpannya
mas validasinya pengecekan data supaya tidak terjadi duplikat data, jika nginputkan file/kode yng sama maka nanti akan muncul peringatan ” DATA SUDAH ADA SILAHKAN ISI KODE YG LAIN” kira2 pake jQuery pa bisa atau ada script yg lain sekiranya mudah.
silakan coba menggunakan form ajax, karena pengecekan di database harus menggunakan script server side
mas tau ga syntak buat validasi seperti ini :
1m x1m di php ( klw tau tulis dengan lengkap )
saya tunggu secepatnya
Gan .. jquery ini klo dalam Ie trus file nya di subfolder yang diinclude, kok gak bisa ya? Firefox sih jalan .. any idea?
saya belum pernah mengalami masalah spt ini di IE maupun browser lain, ada contoh / demo online?
mas, saya belum bisa nangkap data yang dikirim melalui jscript untuk ditanggkap diphp script, mohon pencerahannya. secriptnya sbb:
function etrLogin(e) {
var ev= (window.event) ? window.event: e;
var key = (ev.keyCode) ? ev.keyCode : ev.which;
if (key == 13){
procLogin();
}
}
function procLogin() {
var u, p;
$.post(‘functionx.inc.php’,'f=salt’,function(salt) {
if(salt == ‘-1′) {
$(“#ret_div”).html(‘Ada masalah pada proses login’);
return false;
}
u = $(“#userid”).val();
p = hex_md5($(“#password”).val()+salt);
$.post(‘functionx.inc.php’,'f=login&p1=’+u+’&p2=’+p,function(retlog) {
//retlog = ;
if(retlog == 1) {
$(“#ret_div”).html(‘Login sukses’);
location.href = “menu.php”;
}
else {
$(“#ret_div”).html(‘Login gagal’);
}
});
});
$(“#ret_div”).html(”);
return false;
}
ada script formnya sekalian mas? kl bisa demo online aja
Mas gatot,
Kalo biar event nya keyup gimana caranya? bisa kasih contoh ga?? Saya gagal terus nih…
Thanks anyway
wah maaf saya belum pernah yg menggunakan keyup
mas Gimana & Dimana masang kode supaya tampil pesan Sukses/pesan yg kita inginkan/redirect halaman, setelah berhasil input semua data dengan benar biar ada action jadi user tau kalo datanya udah ke insert.
Soalnya yg itu diem aja jadi user juga bingung datanya udah ke insert apa belum?
Ya kita fungsikan untuk mencegah keraguan lah atau konfirmasi berikutnya.
Mksh kalow dibalez
sbnrnya ini cuma tutorial validasi di sisi client.. jadi memang tidak sampai mengirimkan data
anda bisa menambahkan atribut action di form nya (misalnya
<form action="file.php">), supaya setelah data yg diisi valid semua file action tsb akan memproses data yg dikirimkangood job brother!!!!
tutorial yang sangat berkualitas
all kalo kalian bingung pakai j query
bisa juga pakai ajax
nah di setiap input boxnya diksh onblur trus sintx ajax
kalo pakai ajax isa juga cek data yg sudah ada juga log
pakai sql dkit
jadi mrip2 pas kyk daftar yahoo
kalo ada yg mau tau lebvih jelas
krim ke message fb q aja yha
REA_rf@yahoo.co.id
Mas Saya sudah coba jalankan, dan sudah berhasil…
tapi kalo saya masukan form tersebut ke dalam sebuah table, validasinya tidak berjalan sempurna.
mohon pencerahannya………thanks
problem solved./….
mas …
cara buat script untuk kekuatan password gmana y,, contohnya pss aku daftar akun email yahoo pas mau input password otomatis ada keterangany,password yng di inputin lemah,sedang dan aman misalnya.. mohon pencerahanya..
mas kalau mau mindahin itu tulisan yang error yang berwarna merah di sebelah kanan itu di pindahin di atas form gimana caranya ya..
tolong donggg..
keren nihhhhh…
maturnuwun
gan aq mw tanya, aq khan pake input tapi inputnya dinamis, misal , nah cara validasi n ngepost data nya gmana????aq pake $.ajax bwat ngirimnya….thanks before…
ya …. ada yang ga kluar postnya…aduh sulit nulisnya,…..
Salam kenal…
mas, untuk validasi tanggal lahir gimana ya??
misalnya saya pengen format tanggal lahirnya dd/mm/yyyy.. supaya orang tidak asal sembarang ngisi, misalnya diisi (dd/mm/yyyy) dengan tanggal 32/01/2000 atau 31/14/2000…
thank
kalo’ misalnya setelah success username dan password tidak ada kesalahan lalu dari server mengirim
header(‘location:urlx’);
bagaimana menghandlenya….????
mohon bantuannya…
mas,aku tunggu jQuery dialog form nya….
Terima kasih atas tutorialnya. Mudah-mudahan bermanfaat. Kebetulan lagi nyari cara validasi dengan jquery.
Thanks again.
kalo buat validasi combo bo
select) ato radio button ato check box bagaimana mas??bisa ga dengan jquery???
bisa mas.
di demo itu kan sudah ada contoh yg menggunakan select dan radio button
mas mau tanya..
dicontoh mas kan pesan validasinya nanti tampil disebelah kanan textboxnya..
kalo mau nampilin di bawahnya gimana ya mas??
makasih sebelumnya
edit cssnya mas yg bagian label.error menjadi spt ini:
makasih mas udah bisa
Ketika digabungkan dengan framework PHP CI.. kok javascriptnya g muncul y mas?
ada solusi?
seharusnya tidak ada masalah digabungkan dengan framework apapun termasuk CI
ada url nya yg error mas?
Mas mau tanya.
kalau validasi email yang belum terdaftar gmn yah.?
misalnya dia masukin emailnya ngaco.
ga bisa mas, soalnya ini cuma untuk validasi client side
mas script dibawah ini untuk mengganti field required kan? yang semula bhs inggris jadi bahasa indonesia,,
[code]
messages:{
email: {required: "E-mail harus diisi",
email: "Masukkan E-mail yang valid"
}},
[/code]
nah yang ingin saya tanyakan, kepada mas, yaitu:
gimana caranya menambah menjadi 2 atau lebih,, saya mau nambahkan validasi number
makasih mas, mohon pencerahannya.
mas makasih yah,,
oke banget tutornya,,
“text area” gak berfungsi untuk validasinya… gimana nihhhh?????????
hanya “input”
textarea juga bisa mas.. caranya sama seperti input lain, tinggal ditambah class=”required”
kalo tinymce gimana mas?
soalnya saya udah terapin ditinymce tapi dia kalo kita submit muncul pesan masih kosong padahal di tinymce-nya sudah ada teksnya..
pas saya submit lagi baru bisa jadi dia 2x submit baru bisa gimana ngatasinnya ya mas?
wahh.. belum di jawab ya???
sudah mas wiyono
mas mau tanya lagi…
kalo dari 3 buah combobox messagenya hanya satu aja bisa ga?
jadi gini ceritanya saya membuat combobox untuk tanggal lahir..
nah comboboxnya itu saya pisah jadi 3 combobox pertama untuk tanggal yang kedua untk bulan dan yang ketiga untuk tahunnya..
yang jadi masalah disini messagenya jadi 3 juga
gimana ya biar jadi satu? jadi nanti muncul pesannya gini : tanggal lahir belum diisi.
sepertinya tidak bisa mas, soalnya itu tetap dianggap 3 buah input
ada alternatif ga mas buat ngatasinnya?
belum dibalas ya??
Makasih banyak bos…!!!
mantab banget…!!!
makasih mas, perlu banget ne buat form pendaftaran
tank bgt ya mas bowo… artikel2 mas bowo bagus2 dan membantu saya dlm memperbaiki masalah2 yg ada di blog say…
oiya mas.. gmn caranya bikin kotak comment sperti mas bowo..
tank sblumnya…
Tingyu mas, sukses semuanyan.. beresss.. tengyu yo…
Mas ada lagi, sekarang masalahku:
Jika aku gunakan email dengan googlemail form kontak form-nya jalan lancar, pesan di terima, tapi jika msn dan yahoo kok enggak bisa, gak terkirim pesannya? alias gak terima pesan tersebut, masalahnya apa ya mas? tolong ya? apakah server websitku? atau msn dan yahoo-nya yang lagi error? udah sebulan pusing-pusing…
mas kalo cuma boleh angka aja gimana?
pake ini mas:
digits
Sukses selalu mas, semua akhirnya beres dan teratur…
Terima kasih banyak ya…
Hallo,
Sukses selalu mas, semua akhirnya beres dan teratur…
Terima kasih banyak ya…
oya mas saya kan menggunakan rule seperti ini :
jQuery.validator.addMethod(“lettersonly”, function(value, element) {
return !jQuery.validator.methods.required(value, element) || /^[a-z]+$/i.test(value);
}
, “Letters only please”);
supaya inputannya hanya bisa text tapi kok pas saya pake spasi, spasinya ga kebaca ya?? supaya spasinya bisa kebaca juga gimana ya/