Validasi Formulir Menggunakan Javascript

Validasi Formulir
Menggunakan Javascript

Assalamualaikum wr wb

Pada postingan kali ini saya akan berbagi, bagaimana caranya agar formulir yang dibuat menggunakan HTML dan PHP dapat menerima inputan berupa data yang valid. Misalnya "Nama" harus menerima inputan hanya berupa huruf (tidak boleh angka) dan sebaliknya "NIM" harus menerima inputan berupa angka (tidak boleh huruf atau karakter). Selain itu juga formulir yang diinputkan harus lengkap tidak boleh ada yang kosong, jika ada form yang belum terisi maka akan ada peringatan saat menginputkan.

Caranya adalah, kita harus membuat kondisi yang mengimplementasikan hal hal diatas menggunakan javascript.

Jika user menginputkan nama bukan berupa huruf, namun angka atau karakter tertentu. Maka seperti contoh gambar dibawah, akan ada sebuah peringatan agar user membenarkanya.

Jika nama yg diinputkan terdapat unsur angka/karakter.
Jika NIM yg diinputkan terdapat unsur huruf.
Jika form tidak terisi.


Agar program dapat menjalankan itu maka harus dibuat kondisi untuk memvalidasi inputan menggunakan javascript. Simpelnya script bisa di letakkan di dalam head pada html atau di dalam body sebelum <form>. 
Berikut adalah script validitas formulir diatas (javascript):
<script type="text/javascript">
    function validasi(){
      var namaValid = /^[a-zA-Z]+(([\' '\'\,\.\-][a-zA-Z])?[a-zA-Z]*)*$/;//kondisi Nama harus berupa huruf
      var nama = formulir.nama.value;
      var nimValid = /^[0-9]+$/;//kondisi NIM harus berupa angka
      var nim = formulir.nim.value;
      var alamat = formulir.alamat.value;
      var gender = formulir.gender.value;
      var pesan = ' ';

      if(nama==' '){
//kondisi untuk jika Nama kosong/tidak disi maka akan ada peringatan
        pesan = 'Nama harus diisi\n';
      }
      if(nama != ' ' && !nama.match(namaValid)){//memanggil kondisi var nimValid
        pesan += 'Nama tidak valid\n';
      }
      if(nim==' '){//kondisi untuk jika NIM kosong/tidak disi maka akan ada peringatan
        pesan += 'NIM anda harus diisi\n';
      }
      if(nim !=' ' && !nim.match(nimValid)){//memanggil kondisi var nimValid
        pesan += 'NIM HARUS BERUPA ANGKA!\n';
      }
      if(alamat == ' '){//kondisi untuk jika Alamat kosong/tidak disi maka akan ada peringatan
        pesan += 'Alamat harus diisi\n';
      }
      if(gender == ' '){//kondisi untuk jika Jenis Kelamin tidak dipilih maka akan ada peringatan
        pesan += 'Jenis kelamin harus dipilih\n';
      }
      if(pesan != ' '){//kondisi untuk menampilkan pesan
        alert('Ada kesalahan pada pengisisan formulir : \n'+pesan);
      return false;
    }
    return true;
  }</script>


Untuk HTML nya diletakkan di dalam <body> dibawah script validitas diatas.
Untuk script HTML nya adalah sebagai berikut :
<h1>formulir</h1>
  <table border="1" class="border">
    <td>
      <form name="formulir" action="form0012.php" onsubmit="return validasi()" method="POST" >
        <table>
          <tr>
            <td><b>Nama<b></td>
            <td><input type="text" name="nama" size="22" placeholder="ex: Paijo" class="kotak"></td>
          </tr>
          <tr>
            <td><b>NIM<b></td>
            <td><input type="text" name="nim" size="22" placeholder="ex: 1600018001" class="kotak"></td>
          </tr>
          <tr>
            <td><b>Alamat<b></td>
            <td><textarea name="alamat" rows="5" cols="50" class="kotak"></textarea></td>
          </tr>
          <tr>
            <td><b>Jenis Kelamin<b></td>
            <td>
              <select name="gender" class="kotak">
                <option value="">-Pilih-</option>
                <option value="Laki-Laki">Laki-Laki</option>
                <option value="Perempuan">Perempuan</option>
              </select>
            </td>
          </tr>
        </table>
    </td>
      </table>
    <br>
    <center>
      <input type="submit" value="Inputkan" name="submit">
      <input type="reset" value="Muat Ulang" name="reset">
    <center>
      </form>




Sedangkan untuk proses formulirnya digunakan php untuk mengolah inputan lalu dioutputkan di halaman lain.



Demikian penjelasan yang sangat singkat dari saya, semoga bermanfaat untuk saudara saudara sekalian. Terimakasih telah berkunjung.

Wassalamualaikum wr wb




Komentar

  1. Artikelnya mantap Kak. Penjelasannya juga singkat dan mudah dimengerti. Saya mau kasih sedikit saran aja kak, tolong tambahkan sintaks membuat validasi untuk combobox.Terimakasih kak. Di tunggu artikel selanjutnya ya . Perkenalkan nama saya Tessa Hervika ayo kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  2. wess artikelnya bagus sekali. penjelasan didalam artikel ini dapat dipahami dan mudah dimengerti. terima kasih admin atas artikelnya. semoga kedepanya sukses selalu.
    Perkenalkan nama saya Jheny sandella , ayo kunjungi website kampus saya
    https://www.atmaluhur.ac.id/

    BalasHapus
  3. Alhamdulillah...makasih banyak kakak artikelnya,
    Dengan ada nya artikel dari kakak ini, saya menjadi lebih tau dan lebih paham bagaimana cara membuat validasi formulir menggunakan javascript, dan artikel kakak ini sangat mudah untuk dimengerti,
    Terus bikin artikel ya kakak. sukses selalu ...
    Perkenalkan nama saya Eva maulani.
    Website kampus saya di https://www.atmaluhur.ac.id/

    BalasHapus
  4. Kereen kak, Artikel "Validasi Form Html dengan Javascrip" sangat mudah dipahami. Terutama bagi saya yang pemula ini. Apakah masih ada validasi-validasi yang lain kak? kalo ada mohon ditambahkan supaya lebih lengkap kak
    ditunggu artikel selanjutnya kak...
    perkenalkan saya Mutia Amirah Rahim, Ayo Kunjungi Website Kampus Saya https://www.atmaluhur.ac.id/

    BalasHapus
  5. Makasih banyak kak artikelnya. Artikel ini sangat bermanfaat bagi saya dan orang lain tentang bagaimana cara membuat validasi formulid html dengan javascript. semoga kedepannya kakak bisa membuat artikel bermanfaat lainnya. terimakasih kak, semoga kedepannya makin sukses yaa.
    Ditunggu artikel selanjutnya kak...
    Perkenalkan nama saya Meilianda Aryanti Abelia, Kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  6. Terimakasih artikel yang membahas validasi formulid html dengan javascript.
    dari beberapa artikel yang sempat saya kunjungi dan saya baca masih banyak penulisan, bahasa, dan penyajian dalam menjelaskan suatu materi yang rumit untk dipahami..smg kakak trs brkrya untk membuat artikel yg bermanfaat lainnya
    Perkenalkan nama saya,ernita resva julina
    Kunjungi web kampus saya https://www.atmaluhur.ac.id

    BalasHapus
  7. Hi Min.. artikelnya sangat membantu sekali bagi sipemula seperti saya ini yang baru belajar tentang validasi formulid html dengan javascript. sukses dan semangat selalu ya Min perkenalkan nama saya Margiana Rahayu kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  8. artikelnya bagus kakak,,
    Dengan ada nya artikel dari kakak ini, saya menjadi lebih tau dan lebih paham bagaimana cara membuat validasi formulir menggunakan javascript, dan artikel kakak ini sangat mudah untuk dimengerti,
    Terus bikin artikel ya kakak. sukses selalu ..Nama:HENA MITRIANI,NIM:1922500189,Kelompok: SI2k.
    https://www.atmaluhur.ac.id/

    BalasHapus
  9. Keren min artikelnya trimakasih atas ilmunya min, Nama saya Rizky Pratama dgn NIM 1922500005 kelompok SI2K, Dari stmik atmaluhur, link kampus saya : https://www.atmaluhur.ac.id

    Reply

    BalasHapus





  10. terima kasih banyak ya kakak untuk artikelnya.dengan ini saya dapat belajar bagaimana cara membuat validasi formulir.dan artikel ini sangat mudah dimengerti.sukses selalu ya kak...ditunggu artikel selanjutnya..
    Perkenalkan nama saya Lailatul marfu'ah
    Kunjungi website kampus kami https://www.atmaluhur.ac.id/

    BalasHapus
  11. Terima kasih ya kak udah bikin artikel ini.Berkat artikel yang kakak buat,saya jadi paham bagaimana cara membuat validasi formulir.Artikel yang kakak buat ngak bikin ribet,trus mudah dimengerti...
    Sekali lagi makasih ya kak,atas artikelnya...saya tunggu artikel selanjutnya..
    Oh ya kak..perkenalkan nama saya Sawalia Safitri kunjungi website kampus kami https://www.atmaluhur.ac.id/

    BalasHapus
  12. Allhamdulillah..Terimakasih artikelnya kak..
    Tentang validasi formulir menggunakan javascript..
    Dengan adanya artikel ini saya menjadi tau dan lebih paham.
    Artikelnya juga mudah untuk dimengerti.Terus berkarya kak.
    Ditunggu artikel kakak selanjutnya.
    Perkenalkan nama saya ADEKA SRI PURWANTI.website kampus kami https://www.atmaluhur.ac.id/

    BalasHapus
  13. mantap kali kak artikelnya . sangat membantu saya bagi pemula sangat bermanfaat terus bekarya kak dan semangat untuk membuat artikelnya,artikelnya mudah dipahami dan dimegerti. perkenalkan nama saya ulfa maryanti website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  14. Hi kak.. artikelnya sangat bagus sekali kak dan membantu kami bagi sipemula seperti saya ini yang baru belajar tentang validasi formulir html dengan javascript. Semoga kedepannya dapat memberikan ilmu baru dan cara baru tentang HTML yang lebih, dan dapat dimengerti dengan cepat ya kak hehe....Sukses dan semangat selalu ya kak... Perkenalkan nama saya Derma Anzeny, website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  15. Alhamdulillah trimakasih kak atas argikelnya .
    Dengan ini saya dapat belajar bagaimana cara membuat validasi formulir. Artikel ini sangat bermanfaat dan mudah di pahami.
    Perkenalkan nama saya Nuzul syafitri,, kunjungi website kampus kami
    https://www.atmaluhur.ac.id/

    BalasHapus
  16. Alhamdulillah trimakasih kak atas argikelnya .
    Dengan ini saya dapat belajar bagaimana cara membuat validasi formulir. Artikel ini sangat bermanfaat dan mudah di pahami.
    Perkenalkan nama saya Nuzul syafitri,, kunjungi website kampus kami
    https://www.atmaluhur.ac.id/

    BalasHapus
  17. Alhamdulillah trimakasih kak atas argikelnya .
    Dengan ini saya dapat belajar bagaimana cara membuat validasi formulir. Artikel ini sangat bermanfaat dan mudah di pahami.
    Perkenalkan nama saya Nuzul syafitri,, kunjungi website kampus kami
    https://www.atmaluhur.ac.id/

    BalasHapus
  18. Terimakasih kak artikelnya sangat bagus dan berguna bagi saya, karena sebelumnya saya belum mengetahui bagaimana cara membuat validasi formulir,setelah melihat artikel dari kakak saya jadi bisa.sengat dalam berkarya dan sukses selalu,semoga artikel ini juga berguna bagi teman-teman yang lainnya.perkanalkan nama saya Wendi sepriyadi,kunjungi
    Website kampus saya
    https://www.atmaluhur.ac.id/

    BalasHapus
  19. Terimakasih min atas artikel yang admin buat, artikelnya sangat berguna bagi saya,dengan ada nya artikel ini saya bisa tau bagaiman cara membuat validasi formulir, perkenalkan nama saya Tahmi, website kampus kami
    https://www.atmaluhur.ac.id/

    BalasHapus
  20. Waahhh...... Teriamakasih min artikel yg admin buat,artikel sangat berguna bagi saya.
    Dengan ada artikel ini saya bisa tau bagaimana cara membuat validasi formulir,semoga artikel ini berguna bagi teman" yang lainnya ,perkenalkan nama saya fauzan website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  21. Terimakasih kak atas artikel yang kakak buat, artikelnya sangat berguna bagi saya,dengan ada nya artikel ini saya bisa tau bagaiman cara membuat validasi formulir, perkenalkan nama saya Ardo Jordi Setiawan , website kampus kami
    https://www.atmaluhur.ac.id/

    BalasHapus
  22. thank you min, the article is quite useful for me who are just learning about this material. here I can find out how to make html form validation with javascript. especially for me who was studying in the computer section, this article really helped me and could help a lot of people too. hopefully in the future the admin can make other useful articles. thank you min, I hope that in the future the admin will be more successful, introduce my name, Teddy Kurnia Harfian, please visit my campus website https://www.atmaluhur.ac.id/

    BalasHapus
  23. Terimakasih kak, artikel yang kakak buat sangat bermanfaat untuk saya yang sedang belajar cara membuat validasi formulir, semangat terus kak. Perkenalkan nama saya Ranum Fatwa Aulia, NIM 1922500033, kunjungi website kampus saya di https://www.atmaluhur.ac.id/

    BalasHapus
  24. terimakasih kak bagus sekali bermanfaat terus berkarya kak di tunggu juga artikel selanjut nya
    semangat kak menebarkan kebaikan dan membagikan ilmu
    nama : muhammad nugie cesarianto
    nim : 1922500200
    kelompok : SI 2 K
    alamat web : https://mahasiswa.atmaluhur.ac.id/
    salam budi luhur

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Latihan Minggu Keempat (nomor 3,6,9)

Latihan Bab 1 Alpro 2017 Minggu 1