Validasi Form Menggunakan jQuery Validation Plugin

06 May 2008 204,213 views

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.
jQuery Validation Plugin

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.

Demo Validasi Form

Anda bisa mendownload source code nya di sini:
jQuery Validation (19251 downloads)

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.

159 Comments

  1. wekadesign says:

    Sips…

    Tapi kalo malas coding di function -nya… bisa-bisa web kita dianggap tidak valid ama web validator :D

    so.. jangan malas codingnya….

  2. gawibowo says:

    heheheh.. asal masih pake attribute class dan title kan masih valid. kalau ada attribute2 aneh (seperti equalTo, minlength, rangeLength, dll) baru ditaruh di function ;)

  3. diwaN says:

    it’s mantap buat mempermudah… ai…
    thx peryMuch

  4. black_id says:

    wah mana neh es teh nya…. maksudnya class2 yg laen :p

    oy GPL yo…!! :D

  5. gawibowo says:

    es teh beli di warung sebelah aja.. ;))
    class2 laen menyusul

  6. hartanta says:

    Salam kenal…

    mungkin bisa validasi dengan menghide buton terlebih dahulu.
    setelah lengkap baru button ditampilkan

    thank’s infonya

  7. waNt0 says:

    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:::

  8. gawibowo says:

    iya benar mas, yg paling penting memang validasi secara server side (makanya kan sudah saya tulis di catatan :&#68;)
    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

  9. Rius says:

    Mas wibowo,
    kalo sudah di validasi, terus simpan datanya ke MySQL gimana mas ?

    Thanks

  10. gawibowo says:

    contoh di atas hanya untuk mendemokan validasinya saja, belum ada script untuk menyimpan data ke database
    script utk insert ke mysql contohnya seperti ini:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    
    <?php
    $nim = trim($_POST['nim']);
    $nama = trim($_POST['nama']);
    $alamat = trim($_POST['alamat']);
     
    if (empty($nim)) {
    	$error[] = 'NIM harus diisi';
    }
    if (empty($nama)) {
    	$error[] = 'Nama harus diisi';
    }
    if (empty($alamat)) {
    	$error[] = 'Alamat harus diisi';
    }
     
    if ($error) {
    	echo implode('<br />', $error);
    } else {
    	$sql = "INSERT INTO mahasiswa 
    		(nim, nama, alamat) 
    		VALUES 
    		('$nim', '$nama', '$alamat')";
    	$result = mysql_query($sql);
     
    	if ($result) {
    		echo 'Data berhasil disimpan';
    	} else {
    		echo 'Error: ' . mysql_error();
    	}
    }
    ?>
  11. denbagus says:

    mas kalo pengen di kasih CAPTCHA gimana ya…?

    mohon info nya

    terima kasih

  12. gawibowo says:

    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

  13. fahmi satrio says:

    Thanks for sharing Bro…!!

  14. jaya says:

    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

  15. gawibowo says:

    sudah coba trik ini? :

    1
    2
    3
    4
    5
    
    $('#myForm').validate();
     
    $('#btn_save').click(function() {
    	$('#myForm').submit();
    });
  16. jaya says:

    ok – ok problem solved thanks ya.. :)

  17. danang says:

    mas gatot keren…:D
    sayang aku cowok..:(

  18. gawibowo says:

    lho mas danang.. pengen jadi cewek to? :))

  19. agus says:

    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

  20. agus says:

    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

  21. gawibowo says:

    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.

  22. kang igun says:

    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.

  23. gawibowo says:

    yg #btn_save itu id dari input type=”button”, bukan input type=”submit”
    kalo pake type submit udah otomatis

  24. kang igun says:

    sip mas dah solved.

  25. agus says:

    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…

  26. gawibowo says:

    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.

  27. ganteng says:

    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…

  28. gawibowo says:

    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:

    jQuery.validator.addMethod("lettersonly", function(value, element) {
    	return !jQuery.validator.methods.required(value, element) || /^[a-z]+$/i.test(value);
    }
    , "Letters only please");
  29. 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

  30. alan says:

    tp krn sifatnya cliend side, kodenya bisa di modif y .. ?

  31. handoyo says:

    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

    • gawibowo says:

      kalo pake validasi client side nilai2 di field lain ga ikut kehapus kok, soalnya kan formnya blm disubmit/belum berganti halaman

  32. chuclitly says:

    Hi. Your site displays incorrectly in Opera, but content excellent! Thank you for your wise words:)

  33. john says:

    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 :)

    • gawibowo says:

      bisa saja mas, anda tinggal menggunakan fungsi mail() nya php
      contoh sederhananya begini:

      mail('asdf@yahoo.com', $subject, $pesan);

      kalo mau lebih mudah, saya sarankan menggunakan class seperti phpmailer

  34. john says:

    ok mas.. tar dicoba..
    thx ya.. :)

  35. nita says:

    mas klo mau memvalidasi password n retype password gmn?

    • gawibowo says:

      validasi untuk password biasanya seperti ini:

      1
      2
      3
      4
      5
      6
      7
      8
      
      $("#myForm").validate({
      	rules: {
      		password: "required",
      		retype_password: {
      			equalTo: "#password"
      		}
      	}
      });
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      
      <form id="myForm">
      	<label for="password">Password</label>
      	<input type="password" id="password" name="password" />
       
      	<br/>
      	<label for="retype_password">Retype Password</label>
      	<input type="password" id="retype_password" name="retype_password" />
       
      	<br/>
      	<input type="submit" value="Submit" />
      </form>
  36. iqranegara says:

    aku dpt form validator yg keren http://mootools.floor.ch/en/demos/formcheck/index.htm basisnya mootools
    ada yg tau versi jquery nya?
    trims

  37. owin says:

    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?

  38. fariz says:

    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

    • gawibowo says:

      pake ini mas fariz:

      $("#myForm").validate({
      	rules: {
      		field: {
      			required: true,
      			maxLength: 5
      		}
      	}
      });
  39. Gimana kalo membatasi jml karakter di textarea di wordpresss?

  40. dentestet says:

    ??????????? ?????? ? ???????????? ???????????????? ? ?????? – ???? ?? ?????? ????????????????? ?????? ?????????? ???????????? ??????: ??????? ?????, ??????????? ?????, ??????????? ?????, ?????????????? ?????, ???????? ?????.

  41. titan says:

    mas gatot…kalo pengen textfieldnya hanya boleh diisi angka atau huruf saja…validasinya dimana mas…thx

    • gawibowo says:

      karena blm ada rule tsb, maka tambahkan rule sendiri spt ini:

      jQuery.validator.addMethod("alphanumeric", function(value, element) {
      	return !jQuery.validator.methods.required(value, element) || /^w+$/i.test(value);
      }
      , "Letters, numbers, spaces or underscores only please");
  42. redsuitee says:

    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

  43. amin says:

    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….

  44. amin says:

    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,,

    • gawibowo says:

      anda bisa menggunakan redirect pada file action nya setelah proses insertnya berhasil agar kembali ke halaman form, gunakan script redirect seperti ini:

      header("Location: form.html");

      atau gunakan form berbasis ajax seperti tutorial ini

  45. r3q says:

    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

    • gawibowo says:

      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

  46. didin says:

    ok siip.. mas bowo, salam kenal…. perbanyak mas tutorialnya…. :)

  47. febriawan says:

    mas untuk validasi jika kita menginputkan data tp datanya udah ada di database?

  48. saepul says:

    pak coba kirimmin contoh untuk validasi email
    yang sudah jadi plus dengan script simpannya

  49. febriawan says:

    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.

  50. saepul says:

    mas tau ga syntak buat validasi seperti ini :
    1m x1m di php ( klw tau tulis dengan lengkap )
    saya tunggu secepatnya

  51. Hamid says:

    Gan .. jquery ini klo dalam Ie trus file nya di subfolder yang diinclude, kok gak bisa ya? Firefox sih jalan .. any idea?

  52. raihan says:

    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;
    }

  53. Mas gatot,

    Kalo biar event nya keyup gimana caranya? bisa kasih contoh ga?? Saya gagal terus nih…

    Thanks anyway

  54. ajax says:

    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

    • gawibowo says:

      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 dikirimkan

  55. dr.emi says:

    good job brother!!!!
    tutorial yang sangat berkualitas :)

  56. REA says:

    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

  57. Surya says:

    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

  58. Surya says:

    problem solved./….

  59. gunk says:

    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..

  60. wiyono says:

    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

  61. 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…

  62. Abok says:

    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

  63. achmad says:

    kalo’ misalnya setelah success username dan password tidak ada kesalahan lalu dari server mengirim
    header(‘location:urlx’);

    bagaimana menghandlenya….????
    mohon bantuannya…

  64. Hasan says:

    mas,aku tunggu jQuery dialog form nya….

  65. Terima kasih atas tutorialnya. Mudah-mudahan bermanfaat. Kebetulan lagi nyari cara validasi dengan jquery.

    Thanks again.

  66. irfan says:

    kalo buat validasi combo box(select) ato radio button ato check box bagaimana mas??bisa ga dengan jquery???

  67. peter says:

    mas mau tanya..
    dicontoh mas kan pesan validasinya nanti tampil disebelah kanan textboxnya..
    kalo mau nampilin di bawahnya gimana ya mas??
    makasih sebelumnya

  68. Azmuf says:

    Ketika digabungkan dengan framework PHP CI.. kok javascriptnya g muncul y mas?
    ada solusi?

  69. VanJunior says:

    Mas mau tanya.
    kalau validasi email yang belum terdaftar gmn yah.?

    misalnya dia masukin emailnya ngaco.

  70. alzaidi endi says:

    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.

  71. alzaidi endi says:

    mas makasih yah,,
    oke banget tutornya,,

  72. wiyono says:

    “text area” gak berfungsi untuk validasinya… gimana nihhhh?????????
    hanya “input”

    • gawibowo says:

      textarea juga bisa mas.. caranya sama seperti input lain, tinggal ditambah class=”required”

      • peter says:

        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?

  73. wiyono says:

    wahh.. belum di jawab ya???

  74. peter says:

    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.

  75. peter says:

    belum dibalas ya??

  76. Maulana says:

    Makasih banyak bos…!!!
    mantab banget…!!!

  77. ilham says:

    makasih mas, perlu banget ne buat form pendaftaran :D

  78. machrus says:

    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…

  79. wiyono says:

    Tingyu mas, sukses semuanyan.. beresss.. tengyu yo…

  80. wiyono says:

    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…

  81. peter says:

    mas kalo cuma boleh angka aja gimana?

  82. wiyono says:

    Sukses selalu mas, semua akhirnya beres dan teratur…

    Terima kasih banyak ya…

  83. wiyono says:

    Hallo,

    Sukses selalu mas, semua akhirnya beres dan teratur…

    Terima kasih banyak ya…

  84. peter says:

    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/

    • gawibowo says:

      coba anda pelajari tentang regex (regular expression)
      kalau sudah bisa, akan lebih mudah untuk membuat segala macam rule utk string

  85. Lucie says:

    Mas, kalau mau validasi supaya isi textfield tidak boleh nilai(string) tertentu gimana ya??
    aku punya textfield customer name yang value awalnya = \"Insert Customer\’s Name\" jadi kalau valuenya msh itu berarti textfield blom diisi..

    makasih sblmnya

  86. irvan says:

    mas,,saya mau tanya,,
    saya coba implementasikan contoh jquery yg mas jelaskan diaatas,,

    scriptnya jalan mas,, tapii ketika saya gabungkan dengan script jquery untuk datetimepicker kok malah gjln 2″nya yah mas?!!
    kalo di coba salah satu jalan,,
    mohon pencerahannya mas,,

  87. erka says:

    mas mo tanya..

    “?act=register” tapi ko validation ga jalan..
    “register.php” baru jalan..
    knapa yaa..

  88. Rius says:

    Mas,
    Supaya pesan erronya satu-satu di munculin pake alert gimana yah?

    Thanks

  89. jerocai says:

    mantabh gann..

    penjelasannya singkat,padat dan okeh..
    ijin ctrl+d

    terus berkarya gan..

  90. thayaspace says:

    Mas.. salam kenal dahulu ya….

    langsung aja nih mas mohon bantuannya..
    saya sudah menginstal plugin Validation-nya dan sudah mengaktifkan di WP saya. Namun saya tidak menemukan ada kotak dialog yang seperti punya mas ini. Apa yang harus saya lakukan setelah mengaktifkan plugin tersebut.

    Salam Sukses…

  91. Ibonk says:

    Mas knp ya jQuery versi minified sm versi packed ga bisa singkron sm yg versi biasa? Saya membuat program, biasanya program tersebut lancar2 aja kalo saya pake jQuery yg versi minified, tapi saya pake jQuery biasa malah ga bisa.. Saya pake jQuery versi 1.4.4.. Balesannya ditunggu ya mas..

  92. dwi says:

    mas kalau menentukan jenis file gimana carannya??
    misal memperbolehkan file jpg, gif,png saja yang boleh di upload

    mohon pencerahannya.. terima kasih

  93. hendra says:

    mas bow,,kn ane pke di typo3 ne,,
    pas di coba ternyata validasi y g jalan,,jadi ke triger gtu,,,

    gmn y mas???

  94. luki says:

    salam knal mas..
    mw izin download..
    untuk databasenya ky gmn..?

  95. Baweb says:

    Mantap…sangat berguna..

  96. iqbal says:

    mas, mau tanya :
    – kalo mengganti rule untuk regex nya dmn nya ya?
    – kalo untuk validasi type/format gambar yg di upload gmn? misalnya harus *.jpg atau *.gif

    terimakasih sebelumnya.

  97. Nusaweb says:

    Great, memang validasi sebaiknya dilakukan di dua sisi. Client side dan server side.

    sekedar bantu tambah referensi:
    http://docs.jquery.com/Plugins/validation

    mampir web saya:
    nusaweb.net

  98. andre says:

    mas, newbie niy mau nanya..hhe

    kalo kita bikin validasi untuk pilihan select option gmn ya,,

    trm kasih..

  99. andre says:

    mas, newbie niy mau nanya..hhe

    kalo kita bikin validasi untuk pilihan select option gmn ya,,

    trm kasih sebelumnya..

  100. Adhe says:

    mas mau tanya, kalau hanya ingin boxnya saja merah tanpa ada text \"field is required\" itu harus seperti apa yah?
    mohon pencerahannya yah, terima kasih :)

  101. Putra says:

    mas,klo mau tambah cek availability username, gmn ya?tapi masih pake script ini.jd ngceknya spt email,ada 2 warning,1st:gk diisi,2nd:gk valid,nah,klo username,1st:gk diisi,2nd:sudah ada di db.txz b4

  102. joya chan says:

    mas mo tanya utk validasi di text area agar tidak dapat dimasukkan tag program apa aja..

  103. virgi says:

    mas klo menggabungkan plugin validasi dengan input data via ajak, saya sudah coba sperti ini tp msh gagal, minta pencerahannya kira-kira apa yg salah.

    $(document).ready(function() {
    $(‘#form’).validate({
    rules :{
    password : {
    required : true,
    minlength : 5
    },
    re_pass : {
    required : true,
    minlength : 5,
    equalTo : “#password”
    }
    }
    });

    $(‘#submit’).click(function(){
    $.ajax({
    type: ‘POST’,
    url: $(‘#form’).attr(‘action’),
    data: $(‘#form’).serialize(),
    success : function(data){
    $(“#valid”).html(data).fadeIn(50);
    }
    });
    return false;
    });
    });

  104. dedex says:

    klo buat jquery validasi untuk spay select klo dipilih malah keluar trus itu komentar required
    gimana,…………….>

  105. Amir says:

    Mas mau tanya ya.
    Kalau scriptnya jquery gini dimananya kita letakkan kode validate() nya ya?

    Function jQuery_Proses() {
    var getField = $(“#myform”).serialize().replace(‘+’, ‘ ‘);
    $.ajax({
    type: “POST”,
    url: “proses.php”,
    data: getField,
    beforeSend: function(){
    var a = confirm(“Benar akan disimpan?”);
    if (!a){return false;}else{
    $(‘#loading’).html(setImgLoading());
    }
    },
    success: function(resp){
    $(‘#loading’).html(”);
    alert(“Data berhasil di simpan:\n ” + resp + “”);
    clearForm();
    },
    error: function(e){
    $(‘#loading’).html(”);
    alert(‘Error: ‘ + e);
    }
    });
    }

    Oh iya, saya pakai type=button
    MAkasih

  106. Very nice post. I just stumbled upon your blog and wished to say that I’ve really enjoyed browsing your blog posts. After all I’ll be subscribing to your feed and I hope you write again soon!

  107. sigit says:

    kalo kita mau menambahi fungsi validasi gimana mas?
    misal
    kita ingin menambahi validasi bilangan harus integer

  108. Olan says:

    mas, mw tanya, untuk validasi format dan ukuran max gambar gimna ya? misalnya gambar berformat JPG, max lebarnya 400 px.. trima kasih mas

  109. ferdi says:

    mas saya pemula di php, saya sudah coba step by step tutorial mas, tapi kok masih gak bisa ya mas ??

    file nya memang hanya 2 buah file itu aja ya mas ??

  110. ferdi says:

    oh iya mas saya menggunakan xampp dan file nya saya letakkan di htdocs dan saya jalankan melalui localhost dan tidak berhasil,

    kalau saya tidak menggunakan local host jquery validasi nya berhasil di jalankan

  111. ferdi says:

    setelah saya telusuri ternyata problem nya ada di jenis filenya mas,, apabila saya save dengan jenis file .php tidak bisa, kalo .html bisa,, mohon solusinya agar filenya bisa jalan di file .php

  112. agustri says:

    izin download masbro.

    thx

  113. rizky says:

    mas, kalo 1 form ada 2 plugin jquery bisa nggak??
    kyk form create account nya gmail tuh??
    jdi ada watermark nya &amp; ada validasi nya??

  114. tulus says:

    -.- kemana nih pemiliknya :D

  115. ata says:

    Wahh bagus nih… tutorialnya.. Makasih mas udah tak download
    matur nuwun :D

  116. ZUHAIR AKBAR says:

    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

  117. Ayu says:

    Sore kak, maaf mohon pencerahanya , saya bikin form inputan, nah di situ ada tombol NEW SAVE UPDATE DELETE. dan ada form list, nah jika sudah ada data otomatis datanya kan masuk list kan?? nah di situ kita bisa UPDATE ataupun DELETE. nah otomtis kalau kita mau tidak lanjut untuk di Update/Delete otomatis larinya ke form inputan nah saya pengennya pas di form inputan (yang belom ada data) itu tombol Update Delete di nonaktifkan, sedangkan pada saat ingin tindak lanjut saya ingin tombol Save jadi Non aktif soal tindak lanjutnya hanya ingin ke menggunakan tombol New Update Delete, maaf kan mohon Pencerahannya maklum saya masih awam. atas bantuannya terimakasi

  118. AKBAR says:

    Terimakasih sangat bermanfaat sekali menambah wawasan keilmuan saya ????

  119. Andi says:

    Makasih informasi ilmunya admin. Berguna sekali.

  120. Gutierrez Megan says:

    I do believe this article will be worth attention. Today, it is so difficult
    to get something useful on the net, that Im really surprised to reach this blog.
    The same happened to me when I found https://play.google.com/store/apps/details?id=com.essaypro.devellux. I consider the authors usually are quite similar when it comes to style.
    They are usually both damn great. Thanks a great deal, keep writing!

  121. […] Validasi form menggunakan plugin validation […]

Leave a Reply to Putra Cancel reply

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