Dokumen Ary

Belajar adalah suatu investasi yang tak ternilai harganya

Java Script untuk validasi form input

             Untuk yang pertama kali, saya ingin berbagi bagaimana cara menggunakan Java Script untuk validasi form input, dengan berbagai jenis form. Validasi sendiri merupakan suatu cara untuk mendapat kan data yang sebenarnya dari User yang mengisikan data pada form yang di sediakan, ok langsung saja di bahas yuuk…

  • Mencegah Inputan Kosong

    Misalnya ada sebuah form katakanlah username, kita ingin user mengisikan  data (username nya) di sana dan tidak boleh kosong. Berikut Kode Form nya :
    <form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
    <p>Username: <input name="username" type="text"></p>
    <p><input name="" type="submit" value="Submit"></p>
    </form>
    Pada form tersebut terdapat kode onsubmit=”return validasi_input(this)” , fungsinya adalah ketika tombol Submit di klik maka akan menuju ke function validasi_input pada JavaScript sebelum ke action=”aksi.php”, Berikut Kode JS nya, letakkan di atas Form ya..
    <script type="text/javascript">
    function validasi_input(form){
      if (form.username.value == ""){
        alert("Username masih kosong!");
        form.username.focus();
        return (false);
      }
    return (true);
    }
    </script>
    Ketika from dengan nama username valuenya == ” ” (kosong) maka akan muncul alert “Username masih kosong” dan from username akan focus.
  • Membatasi Minimal Inputan

    Gunakan form username diatas sebagai contoh, dan ganti JavaScriptnya menjadi berikut
    <script type="text/javascript">
    function validasi_input(form){
      var mincar = 5;
      if (form.username.value.length < mincar){
        alert("Panjang Username Minimal 5 Karater!");
        form.username.focus();
        return (false);
      }
       return (true);
    }
    </script>
    Jadi ketika isi dari form username panjangnya kurang dari 5, maka akan muncul alert “Panjang Username Minimal 5 Karakter”
  • Minimal Inputan dan hanya Huruf atau Angka

    Gunakan form username saja sebagai contoh, dan ganti JavaScriptnya menjadi berikut
    <script type="text/javascript">
    function validasi_input(form){
       pola_username=/^[a-zA-Z0-9\_\-]{6,100}$/;
       if (!pola_username.test(form.username.value)){
          alert ('Username minimal 6 karakter dan hanya boleh Huruf atau Angka!');
          form.username.focus();
          return false;
       }
    return (true);
    }
    </script>
  • Validasi Pilihan Radio Button

    Sebelumnya sediakan dulu form Radio Button, disini saya mencontohkan pilihan untuk jenis kelamin, dimana user harus memilih laki-laki atau Perempuan. Berikut kode formnya
    <form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
    <p>Jenis Kelamin: <input type="radio" name="jk" value="L">Laki-Laki
    <input type="radio" name="jk" value="P">Perempuan</p>
    <p><input name="" type="submit" value="Submit"></p>
    </form>
    Pada From tersebut masih terdapat kode onsubmit=”return validasi_input(this)”, Berikut Kode JS untuk fungsi tersebut
    <script type="text/javascript">
    function validasi_input(form){
      function check_radio(radio)
      {
    // memeriksa apakah radio button sudah ada yang dipilih
        for (i = 0; i < radio.length; i++)
        {
          if (radio[i].checked === true)
          {
            return radio[i].value;
          }
        }
       return false;
       }
    
       var radio_val = check_radio(form.jk);
       if (radio_val === false)
        {
          alert("Anda belum memilih Jenis Kelamin!");
          return false;
        }
       return (true);
    }
    </script>
    Pada Fungsi validasi_Input terdatapat juga fungsi cek_radio yang fungsinya untuk mengembalikan nilai True jika sudah ada yang terpilih dan False jika belum ada yang terpilih.
  • Validasi Untuk Combobox

    Seperti biasa sediakan sebuah form berType Combobox, saya mencotohkan pada pilihan Agama, dimana user harus memilih salah satu dari agama, Berikut kode formnya
    <form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
    <p>Agama: <select name="agama">
              <option value="pilih" selected>--Pilih--</option>
              <option value="islam">Islam</option>
              <option value="kristen">Kristen</option>
              <option value="katolik">Katolik</option>
              <option value="hindu">Hindu</option>
              <option value="budha">Budha</option>
              </select></p>
    <p><input name="" type="submit" value="Submit"></p>
    </form>
    Yang harus di ingat adalah, pada combobox sediakan satu pilihan yang bukan datanya(bukan agama), gunanya sebagai acuan pada javascriptnya, kalo form yang saya buat terletak pada kode berikut <option value=”pilih” selected>–Pilih–</option>, dengan pilan tersebut maka gampang saja, pasti anda sudah mengetahuinya.., 🙂 bila masih belum dong, ini code JS nya
    <script type="text/javascript">
    function validasi_input(form){
     if (form.agama.value =="pilih"){
        alert("Anda belum memilih agama!");
        return (false);
     }
    return (true);
    }
    </script>
  • Input Hanya Angka

    Kasus yang cocok misalnya dalah input No Telp/Hp pada form, ok tanpa tunggu lama-lama 😀 langsung buat form nya, kalo males, ni kode form nya
    <form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
    <p>Telp/Hp : <input name="telp" type="text"></p>
    <p><input name="" type="submit" value="Submit"></p>
    </form>
    Kalo di lihat, nama form input tersebut adalah telp, jadi value dari form telp tersebut yang harus di cek satu per satu jika bukan angka langsung di tampilkan isi dari alertnya. Berikut kode javascriptnya
    <script type="text/javascript">
      function validasi_input(form){
      if (form.telp.value != ""){
      var x = (form.telp.value);
      var status = true;
      var list = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9");
      for (i=0; i<=x.length-1; i++)
      {
      if (x[i] in list) cek = true;
      else cek = false;
     status = status && cek;
      }
      if (status == false)
      {
      alert("Telp harus angka!");
      form.telp.focus();
      return false;
      }
      }
      return (true);
      }
      </script>
  • Validasi Penulisan Email

    Validasi penulisan email adalah yang paling sering di gunakan, karena alamat email memiliki karakter khusus yaitu @ dan .(titik), jika nama form inputnya dalah email, maka code javasciptnya adalah sebagai berikut :
    <script type="text/javascript">
    function validasi_input(form){
      pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      if (!pola_email.test(form.email.value)){
        alert ('Penulisan Email tidak benar');
        form.email.focus();
        return false;
      }
      return (true);
    }
    </script>

Ok pembahasan saya cukupkan sampai disini, semoga bisa bermanfaat 🙂 🙂

42 responses to “Java Script untuk validasi form input

  1. jouleea February 14, 2012 at 6:40 pm

    terima kasih,sangat bermanfaat 🙂

  2. melinda March 21, 2012 at 3:04 pm

    makasihh ^_^ ilmunya ..
    semoga berkah amiiin 🙂

  3. abidjoesoep May 25, 2012 at 4:31 am

    amal baiknya bermanfaat buat orang lain hatur nuhun moga allah swt. menambah ilmunya

  4. Haerun May 27, 2012 at 7:52 am

    waa! makasi banyak, masbroh.
    sangat membantu 😀

  5. Kusma August 11, 2012 at 5:54 am

    membntu bnget Pak,,, thanks ya :))

  6. roofi September 25, 2012 at 3:22 pm

    aksi.php itu yang mna yaa

  7. Yudia Rahman December 7, 2012 at 5:16 am

    Mantap ilmunya massss……. Thanks……..

  8. Root December 21, 2012 at 2:28 am

    makasih gaann….
    share terus ilmunya……

  9. dhonieSN January 17, 2013 at 2:22 am

    makasih gaaann
    terbantukan saya ..

  10. miftah March 16, 2013 at 5:32 pm

    wahhhh keren banget bang…..thankzz infonya 🙂

  11. mumun April 21, 2013 at 5:11 pm

    file javascript nya apa mas isinya??
    apa tidak usah di sertakan file JS.a… bingung dengan kata type=”text/javascript”>
    itu maksudnya apa??

  12. Martini June 18, 2013 at 4:39 am

    sip… makasih banget mas bro!

  13. susanto February 15, 2014 at 8:06 am

    mas klo brdasarkan id,, bgaimana?

  14. Kharistiyan March 13, 2014 at 7:58 am

    bermanfaat om, sekalian mau nanya om, klo pengecekan username yg ada di database itu gimana ya?

  15. Budi Jatmiko March 23, 2014 at 7:56 am

    jika ingin membuat serial number misalnya angka sebanyak 16 digit yang di generate dari nama,email dan kota si pendaftar gimana gan….kemudian kita pengen membypass serial nymber tersebut bisa gan?

  16. iwan April 22, 2014 at 11:18 am

    alhamdulillah,, trima kasih gan, mnta izin copas gan sklian q mau pljrin,,

  17. Tamara June 7, 2014 at 6:48 pm

    You actually make it seem so easy with your presentation but I find this topic to be actually something that I think
    I would never understand. It seems too complicated and extremely broad for
    me. I am looking forward for your next post,
    I’ll try to get the hang of it!

  18. 水耕 July 1, 2014 at 12:37 am

    Hey! Quick question that’s entirely off topic. Do you know how to
    make your site mobile friendly? My blog looks weird whenn viewaing from my apple iphone.
    I’m trying too find a theme or plugin that might be aable to resolve this issue.
    If yyou have any recommendations, please share. Appreciate
    it!

  19. rudy July 1, 2014 at 2:24 am

    Mau nanya kak,
    Gimana buat validasi angka seperti di atas tapi…
    Jika angka pertama = 0 [nol]
    Tidak bisa di input.
    Ex: 0123

    Jika angka kedua nol = 0 [nol]
    Baru bisa.
    Ex: 1023

  20. When the location is virtual life August 1, 2014 at 6:11 am

    mau nanya dong … kalau javascript yang di atas kan pake alert nah
    kalau buat pertanyaan kaya ingin menghapus data pake apa ya ?

    jadi ketika ditekan tombol hapus dia bertanya … anda yakin ? yes no < seperti itu

    trims…

  21. แว่นกันแดด October 14, 2014 at 3:59 am

    I enjoy what you guys are up too. This type of clever work
    and exposure! Keep up the great works guys I’ve incorporated you guys to my personal blogroll.

  22. Soma Wahyu January 17, 2015 at 8:29 am

    wohooo akhirnya ketemu thanks gan tentang share ilmunya 😀

  23. pilopa February 11, 2015 at 4:54 am

    kalo untuk tipe gambar dan size nya javascriptnya gimana gan

  24. spr February 26, 2015 at 9:02 pm

    makasih gan, mudah dimengerti dan bermanfaat banget bagi pemula seperti saya..

  25. Dotmp3 March 25, 2015 at 1:34 pm

    makasih banyak min.
    Saya coba pelajari dulu atu atu he he.

  26. zeneight May 8, 2015 at 12:47 pm

    Untuk menggabungkan semua itu jadi satu script gimana caranya ya kk?

  27. mira June 3, 2015 at 5:34 am

    kalo validasinya langsung di 2 text field gimana?

  28. mamas agus June 30, 2015 at 10:31 pm

    mantab gan, sangat membantu ijin copy gan
    terima kasih

  29. peterpang November 29, 2015 at 9:44 am

    TERIMAKASIH, SANGAT BERMANFAAT, MANTAAAAAAP, IJIN COPAS YA.

  30. Rizal Setiawan March 3, 2016 at 6:34 am

    gan mau nanya. kalo name nya array gimana?

  31. vmaxpembesaralami May 7, 2016 at 9:50 pm

    gan gimana cara membut kolom verifikasi kode dan membut kodenya .

  32. yuan eko February 16, 2017 at 7:26 am

    keren gan mkasih tutornya

  33. eBe 40:M March 8, 2017 at 8:53 pm

    tengyu very much master

  34. Susanto September 19, 2017 at 2:15 pm

    kalau validasinya pengen jumlah yang di input tidak boleh lebih dari jumlah_barang gimana bang?

  35. Ayu August 25, 2018 at 2:01 am

    Pagi 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

  36. meren laurensia March 28, 2020 at 7:37 am

    halo kak.. thanks kak atas artikelnya sudah membantu dalam perkuliahan saya kali ini.. saya mau tanya kak, bisakah validasi dilakukan pada semua hal yang diinput?.. smoga kakak dapat terus berkarya dlm membuat artikel” pada website.. sukses slalu kak.. perkenalkan nama saya meren, mahasiswi dari STMK Atma Luhur Pangkalpinang.. ini website kampus saya https://www.atmaluhur.ac.id/

  37. MERENLAU March 28, 2020 at 7:38 am

    halo kak.. thanks kak atas artikelnya sudah membantu dalam perkuliahan saya kali ini.. saya mau tanya kak, bisakah validasi dilakukan pada semua hal yang diinput?.. smoga kakak dapat terus berkarya dlm membuat artikel” pada website.. sukses slalu kak.. perkenalkan nama saya meren, mahasiswi dari STMK Atma Luhur Pangkalpinang.. ini website kampus saya https://www.atmaluhur.ac.id/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: