--> Membuat Validasi JavaScript Pada Form HTML
Home Belajar JavaScript

validasi javascript

SeniKoding.com - Validasi JavaScript adalah aturan yang boleh dan tidak diisi didalam sebuah inputan. Jadi jika kita membuat validasi, maka data yang diinputkan ke dalam form akan difilter dahulu sebelum diproses lebih lanjut. Cara ini sangat penting untuk mengolah data yang baik dan benar diperlukan. Data yang sudah benar selanjutnya akan diproses lebih lanjut, bisa di inputkan kedalam database atau juga hanya memastikan validan nya.

Apa efek seandainya data form atau inputan tidak diberi Validasi?. Data inputan yang tidak diberikan Validasi maka akan masuk dan proses apa adanya user menginputkan, artinya apapun yang di tuliskan user tidak disaring lagi dan langsung diproses.

Efeknya adalah:
- Bisa menjadikan data yang buruk.
- Data yang di inginkan tidak sesuai.
- Celah untuk orang iseng lebih besar, karena data apapun bisa dimasukkan.

Membuat Validasi JavaScript Pada Form HTML


Form HTML yang baik adalah form yang terbentuk secara rapi dan terdapat validasi data. Artinya tidak semua data bisa masuk tanpa proses filterisasi.
Contoh saja website Google, untuk proses login/signin, didalam formnya akan ditemukan validasi data ketika kita salah dalam memasukkan data. Misal kita memasukkan Username: SeniKoding.com, maka akan ditolak oleh validasi google karena pada umumnya username seseorang tidak menggunakan tanda baca titik (.). Kurang lebih penjelasan singkat Validasi JavaScript seperti itu.
Dan bagaimana cara membuatnya? tenang disini akan saya terangkan cara membuat Validasi JavaScript didalam Form HTML.

Langkah pertama membuat Validasi JavaScript didalam Form HTML adalah membuat kode JavaScript yang berisi perintah-perintah/function untuk merender atau memfilter daripada Inputan. Kedua kita akan membuat Form HTML nya itu sendiri, dengan diberikan tombol Submit untuk proses lebih lanjut dan event onClick untuk menyambungkan dengan function JavaScript yang sudah dibuat dilangkah pertama.

Baca juga : Membuat From HTML

Pada kesempatan ini saya akan memberikan simple Form HTML dengan 3 unit inputan, seperti: Nama, No. Telp dan Email. Ketiga inputan ini masing-masing validasi berbeda sehingga sekiranya bisa dijadikan contoh untuk latihan.

Cara Membuat Form HTML dengan Validasi JavaScript


Ada 3 contoh bagian inputan didalam Form:

1. Nama


Saya akan memberikan Validasi berupa inputan hanya boleh mengguankan Huruf/Alphabet saja. Contoh: Muhammad (benar), Ridwan001 (salah).

Dibawah ini potongan kode Validasi JavaScript, Nama:

<!-- fungsi alphabet -->
function Alphabet(nilai, pesan) {
  var alphaExp = /^[a-zA-Z]+$/;
  if(nilai.value.match(alphaExp)) {
    return true;
  }
  else {
    alert(pesan);
    nilai.focus();
    return false;
  }
}

Penjelasan:
- Pertama membuat nama function Alphabet, dengan parameter dinamis yaitu (nilai, pesan).
- Data yang boleh dimasukkan adalah berupa "a-zA-Z".
- Jika selain data "a-zA-Z" ini dimasukkan, maka akan muncul pesan Alert "alert(pesan);".

validasi javascript


2. No. Telp


Pada bagian ini akan saya berikan validasi berupa hanya nomor/angka saja yang boleh di inputkan, contoh: 12345 (benar), 123AB (salah).

Dibawah ini potongan kode validasi No. Telp:

<!-- fungsi number -->
function Number(nilai, pesan) {
   var numberExp = /^[0-9]+$/;
   if(nilai.value.match(numberExp)) {
     return true;
   }
   else {
     alert(pesan);
     nilai.focus();
     return false;
   }
}

Penjelasan:
- var numberExp = /^[0-9]+$/; merupakan variabel numberExp yang diberi batasan validasi angka 0-9.
- Arti Match pada "if(nilai.value.match(numberExp))" adalah string.match(), mencari string menggunakan Regular Expression (Regex). Pembahasan regular expression akan dibahas dilain kesempatan.
- Jika salah atau inputan tidak benar maka akan ada pesan alert "alert(pesan);".

validasi javascript


3. Email


Pada email akan diberikan validasi masih berupa Regular Expression. Contoh: senikoding@gmail.com (benar), senikoding@gmail (salah).

Potongan kode Validasi JavaScript, Email:

 <!-- fungsi Email  -->
function cekEmail(nilai, pesan) {
  var email = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
  if(nilai.value.match(email)) {
    return true;
  }
  else {
    alert(pesan);
    nilai.focus();
    return false;
  }
}

Penjelasan:
- membuat variabel email " var email = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/; " berupa huruf, angka dan simbol yang diperbolehkan dalam ngeninputkan sebuah email.

validasi javascript


4. Validasi tambahan (pesan)


Validasi ini hanya tambahan yaitu pesan alert yang disampaikan setelah inputan dimasukkan.

Potongan kodenya:

function validasi() {
  Alphabet(document.getElementById('nama'), 'Nama harus Huruf semua!!');
  Number(document.getElementById('telp'), 'Telp. hanya ber isi Number!!');
  cekEmail(document.getElementById('email'), 'Email tidak benar!!');
}

Penjelasan:
- pada function "Alphabet" dengan ID "nama" berupa pesan alert "Nama harus Huruf semua!!".
- pada function "Number" dengan ID "telp" berupa pesan alert "Telp. hanya ber isi Number!!".
- pada function "cekEmail" dengan ID "email" berupa pesan alert "Email tidak benar!!".

5. Form HTML


Bagian terakhir yaitu Form HTML.

Potongan kode Form HTML nya sebagai berikut:

<form>
    <p>Nama :
    <input type="text" name="nama" id="nama"></p>
    <p>No. Telp :
    <input type="number" name="telp" id="telp"></p>
    <p>Email :
    <input type="email" name="email" id="email"></p>
    <p><input type="submit" onClick="validasi()" value="Submit"></p>
</form>

Penjelasan:
- Input Nama, <input type="text" name="nama" id="nama"> dengan ID "nama".
- Input No. Telp, <input type="number" name="telp" id="telp"> dengan ID "telp".
- Input Email, <input type="email" name="email" id="email"> dengan ID "email".
- Input type Submit, <input type="submit" onClick="validasi()" value="Submit"> untuk mensubmit/mengirim data lebih lanjut, dengan disertai Event JavaScript "onClick" dan pemanggilan function bernama "validasi()".

validasi javascript

Baca juga : Belajar Event Jquery

Akhirnya potongan-potongan kode Validasi JavaScript Pada Form HTML sudah dibuat, dan jika digabungkan seluruh kode Validasi dan Form HTML diatas akan menjadi seperti ini:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar JavaScript</title>
        <!-- Validasi JavaScript -->
        <script language="JavaScript">
            <!-- fungsi alphabet -->
            function Alphabet(nilai, pesan) {
                var alphaExp = /^[a-zA-Z]+$/;
                if(nilai.value.match(alphaExp)) {
                    return true;
                }
                else {
                    alert(pesan);
                    nilai.focus();
                    return false;
                }
            }
            <!-- fungsi number -->
            function Number(nilai, pesan) {
                var numberExp = /^[0-9]+$/;
                if(nilai.value.match(numberExp)) {
                    return true;
                }
                else {
                    alert(pesan);
                    nilai.focus();
                    return false;
                }
            }
            <!-- fungsi Email  -->
            function cekEmail(nilai, pesan) {
                var email = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
                if(nilai.value.match(email)) {
                    return true;
                }
                else {
                    alert(pesan);
                    nilai.focus();
                    return false;
                }
            }
           
            function validasi() {
                Alphabet(document.getElementById('nama'), 'Nama harus Huruf semua!!');
                Number(document.getElementById('telp'), 'Telp. hanya ber isi Number!!');
                cekEmail(document.getElementById('email'), 'Email tidak benar!!');
            }
        </script>
    </head>
    <body>
        <h2>Belajar Form HTML dengan Validasi JavaScript</h2>
        <form>
            <p>Nama :
            <input type="text" name="nama" id="nama"></p>
            <p>No. Telp :
            <input type="number" name="telp" id="telp"></p>
            <p>Email :
            <input type="email" name="email" id="email"></p>
            <p><input type="submit" onClick="validasi()" value="Submit"></p>
        </form>
    </body>
</html> 

Berikut ini hasil online Preview nya:



Sampai disini Membuat Validasi JavaScript Pada Form HTML, semoga bermanfaat. Jika bermanfaat jangan lupa di Share ya gaess :).

Ada pertanyaan tentang Belajar JAVASCRIPT ?

- Salam -


Baca juga :


25 komentar

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. makasih kak, ini sangat membantu saya.

    My blog

    BalasHapus
  3. Makasih banget kak atas artikelnya ,karena telah membantu saya dalam pembuatan Program web pada html dengan menggunakan javascript.Sebelumnya saya kesulitan dalam mengkoding karena enggak tau gmna cara make nya,setelah melihat dari langkah kakak saya mudah sekali dalam pengetikan dan tau dmna tempat nya
    .Semoga kakak semaki berjaya dalam artikelnya karena dapat membantu orang lain dan semakin sukses Aamiin
    Perkenalkan Nama saya Dhita Heru Pambudi .Kunjungi website kampus kami https://www.atmaluhur.ac.id/
    Terima kasih:D

    BalasHapus
  4. Terima kasih ya min Artikelnya bagus mudah di pahami apalagi bagi saya yang baru mulai belajar tentang pemrograman web sebelumnya saya sangat kesusahan dalam dalam mengkoding tetapi dengan adanya artikel ini dapat mempermudah saya apalagi dalam bagaimana cara Membuat Validasi JavaScript Pada Form HTML itu sangat membantu sekali
    terus berkarya ya min semoga bisa bermanfaat bagi orang lain,,
    Perkenalkan nama saya Miftahul Jannah, kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  5. Hallo kak, terimakasih atas artikel yang kakak buat karena isi nya sangat bermanfaat sekali dan mudah dipahami untuk saya dan teman teman yang baru belajar tentang cara membuaT VALIDASI html. Ditunggu artikel berikutnya kak sukses selalu untuk kakak. perkenalkan nama saya Denni Ramli. Kunjungi website kampus kami juga kak https://www.atmaluhur.ac.id/

    BalasHapus
  6. Terimakasih kak atas artikelnya,sangat bermanfaat sekali. saya jadi bisa mudah memahami dan mempelajari cara bagaimana membuat validasi JavaSript pada form HTML. tetap selalu berkarya kak dan sukses selalu, ditunggu artikel-artikel terbaru selanjutnya. Perkenalkan nama saya Arnold Julyanto Sibarani, kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  7. Terimakasih ya kak atas artikelnya. Dengan adanya artikel ini dapat mempermudah saya dalam memahami bagaimana cara Membuat Validasi Form Html menggunakan JavaScript. Yang sebelumnya saya sangat kesusahan dalam dalam mengkoding tetapi dengan adanya artikel ini dapat mempermudah saya.
    sukses selalu kak dan terus berkarya...
    Ditunggu artikel berikutnya kak....
    Perkenalkan nama saya Meilianda Aryanti Abelia, kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  8. Malam kak... Terimakasih kak artikelnya sangat bermanfaat kak untuk saya lebih mudah mengrtahui lebih dalam tentang cara bagaimana membuat validasi form html menggunakan javascript, dan sangat membantu sekali jika saya ad tugas untuk mengkoding kak.
    Terus berkarya dan suksek selalu kak.
    Nama : Arvina Destiyani
    Nim. : 1922500073
    Kelompok : SI2J
    Link kampus : https://www.atmaluhur.ac.id/

    BalasHapus
  9. Terima kasih kakak Artikelnya bagus mudah di pahami,bagi saya belajar tentang pemrograman web sebelumnya saya sangat kesusahan dalam mengkoding tetapi dengan adanya artikel ini dapat mempermudah saya apalagi dalam Membuat Validasi JavaScript Pada Form HTML itu sangat membantu sekali
    terus berkarya kakak semoga bisa bermanfaat bagi orang lain,,
    Perkenalkan nama : Johan Alamsyah Nim : 1922500193 Kelas : SI2K dan ini website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  10. Wah makasih ya kak atas ilmunya. Mempermudah saya dalam melaksanakan tugas. Semngat dalam hal membagi ilmunya kak. Sukses terus. Oh ya kenalin saya Amirah hazwani. nim 1922500072. Kelompok SI2J. Link kampus https://www.atmaluhur.ac.id/

    BalasHapus
  11. Terimakasih kak. Artikel yang kakak buat sangat bagus. Semangat terus ya kak untuk membuat artikelnya.
    Dan Saya mau bertanya, validasinya bisa dilakukan dengan semua Hal yang di input ya?.
    Perkenalkan Nim saya 1922500053, Nama Muhammad Intan Arfies, Kelompok SI2K, link kampus saya https://www.atmaluhur.ac.id/
    Salam kenal ya kak.

    BalasHapus
  12. Terima Kasih ya kak buat artikelnya :) Artikelnya sangat membantu dalam belajar dan pembikinan tugas.. artikel nya sangat mudah dipahami dan dimengerti.. terus semangat ya kak dalam bikin artikel yang keran dan bagus lagi ya kak :)
    Perkenalkan Nama saya Laila Huriana Anisah Rohmawati dari kampus STMIK Atma Luhur kunjungi juga website kami di (https://www.atmaluhur.ac.id/)

    BalasHapus
  13. Terimakasih kak atas artikel yang kakak buat, ini sangat membantu saya yang baru belajar HTML, penyertaan coding sangat memudahkan saya untuk memahami nya, semoga kedepan admin bisa membuat artikel yang lebih bermanfaat lagi, perkenalkan nama saya Rian Cahya Fajar, mahasiswa dari kampus STMIK Atma Luhur, dan kunjungi website kami di https://www.atmaluhur.ac.id/

    BalasHapus
  14. wah artikel ini sangat membantu kak saya dalam belajar HTML coding nya sangat membantu saya dan mudah dipahami, kedepannya lebih baik lagi ya kak , nama saya CANDRA ARDIANSYAH Mahasiswa kampus Stmik Atma Luhur ini link kampus saya https://www.atmaluhur.ac.id/ jangan lupa mampir

    BalasHapus
  15. Hallo kak, terimakasih atas artikel yang kakak buat karena isi nya sangat bermanfaat sekali dan mudah dipahami untuk saya dan teman teman yang baru belajar tentang cara membuaT VALIDASI html. Ditunggu artikel berikutnya kak sukses selalu untuk kakak. #nama famzi abel p #nim1922500207 #matkul DPW #https://www.atmaluhur.ac.id/

    BalasHapus
  16. wah terima kasih kak untuk artikelnya. Saya sangat menghargai artikel yang admin buat, di awal kalimat dijelaskan apa itu validasi dan langsung to the next point cara membuat validasi nya di lengkapi coding nya dan dibuat dengan sederhana. Yang sangat ingin saya apresiasikan adalah yang dimana ditunjukan hasil jadinya untuk pengunjung artikel. saya harap kedepanya admin terus mengolah artikel ini dengan konten serupa.
    Perkenalkan nama saya Andika Aprianus
    kunjungi Website kampus kami di Link ini https://www.atmaluhur.ac.id/

    BalasHapus
  17. Termakasih atas semua materi yang kakak berikan...sungguh bermamfaat sekali bagi saya..dan bisa juga memenuhi tugas kuliah saya dalam perkuliahan perkenalkan nama m jainuri Nim 1922500045 kelas Si2J dan web kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  18. terima kasih ya min Artikelnya bagus mudah di pahami apalagi bagi saya yang baru mulai belajar tentang pemrograman web sebelumnya saya sangat kesusahan dalam dalam mengkoding tetapi dengan adanya artikel ini dapat mempermudah saya apalagi dalam bagaimana cara Membuat Validasi JavaScript Pada Form HTML itu sangat membantu sekali
    terus berkarya ya min semoga bisa bermanfaat bagi orang lain,,
    Perkenalkan nama saya Reza pahlevi, kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  19. Selamat siang kak,terimakasih telah memberi ilmu,artikelnya sangat menarik dan mudah di praktekan,dan bisa membantu saya menyelesaikan tugas kuliah saya,semoga bisa memberi artikel lain yang lebih menarik lagi,perkenalkan nama saya dita rahmanda,nim 19222500076,dari kelompok SI2j,dan link kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  20. Terimakasih ya kak atas artikelnya. Dengan adanya artikel ini dapat mempermudah saya dalam memahami bagaimana cara Membuat Validasi Form Html menggunakan JavaScript. Yang sebelumnya saya sangat kesusahan dalam dalam mengkoding tetapi dengan adanya artikel ini dapat mempermudah saya.
    sukses selalu kak dan terus berkarya,
    Ditunggu artikel berikutnya kak.
    Perkenalkan saya :
    Nama:Adri firmansyah
    Nim:1922500055
    Kelas:SI2JJ
    Link kampus:https://www.atmaluhur.ac.id

    BalasHapus
  21. Terimakasih atas artikel yang anda buat
    Ini sangat membantu saya untuk belajar terus menulis artikel yang bermanfaat untuk orang banyak
    Sekali lagi terima kasih
    Nam saya edo renaldi kla si2j nim 1922500004
    Link kampus:https://www.atmaluhur.ac.id

    BalasHapus
  22. Terimakasih kak atas artikel yang kakak buat, ini sangat membantu saya yang baru belajar HTML, penyertaan coding sangat memudahkan saya untuk memahami nya, semoga kedepannya kakak bisa membuat artikel yang lebih bermanfaat lagi, dan semoga lebih maju kak perkenalkan nama saya Andrys Saputra NIM 1922500168 kelompok SI2K dan link kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  23. Terima kasih kak artikel nya, artikel nya sangat membantu dan menarik sekali, dan sangat membantu untuk saya belajar html, dapat mempermudah bagi saya yang pemula.
    Ditunggu artikel berikutnya kak, semoga artikel kedepannya lebih berguna dan bermanfaat lagi.
    Perkenalkan nama saya Elvin abel Nim 1922500134, link kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  24. makasih gan atas artikelnya, materi yang disampaikan mudah dipahami dan sederhana sekali. ditunggu gan update-an artikel lainnya. perkenalkan juga, nama saya Tri Utami mahasiswa dari STMIK atma Luhur jurusan Sistem Informasi. kalau ada waktu luang kunjungin juga ya web kampus saya di : https://www.atmaluhur.ac.id

    BalasHapus
  25. Selamat siang kak,terimakasih telah memberi ilmu,artikelnya sangat menarik dan mudah di praktekan,dan bisa membantu saya menyelesaikan tugas kuliah saya,semoga bisa memberi artikel lain yang lebih menarik lagi,perkenalkan nama saya JEFFRY H SUFRYANTO SIMARMATA,nim 19222500047,dari kelompok SI2j,dan link kampus saya https://www.atmaluhur.ac.id/

    BalasHapus

Dilarang SPAM Komentar!

to Top