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


34 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. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. Artikelnya sangat bagus dan dikustom sangat menarik dan mudah dimengerti sangat cocok dengan saya yang masih mahasiswa dan masih belajar terkait membuat validasi form HTML menggunakan java script
    Nurfatonah - 2022500133-kelompok SI2K
    https://www.atmaluhur.ac.id/

    BalasHapus
  25. Terimakasih admin dengan membaca artikel ini pengetahuan saya tentang html menjadi bertambah... Saya fira karunia 1722500127 mahasiswa dari isb atmaluhur, senang sekali bisa berkenalan dengan admin.. Kunjungi web kampus saya juga ya https://www.atmaluhur.ac.id

    BalasHapus
  26. Saya sangat mengapresiasi artikel yg sudah kakak buat, artikel ini sangat membantu saya dalam mempelajari cara membuat validasi form pada html menggunakan javascript, point point' nya disampaikan dengan jelas, pengerjaan nya disampaikan secara detail sehingga memudahkan saya untuk mengerjakan nya secara langsung, terimakasih atas ilmunya kak, ditunggu lagi artikel-artikel berikutnya.
    Salam kenal saya Sutia Dinarti Nim : 2022500146 kunjungi juga website kampus kami https://www.atmaluhur.ac.id

    BalasHapus
  27. Terus bekarya bang artikel nya sangat membantu
    SAYA Vendo
    kunjungi website kami
    https://mahasiswa.atmaluhur.ac.id/

    BalasHapus
  28. Artikelnya sangat membantu kak,
    Saya Rama Erlangga
    Kunjungi website kami https://www.atmaluhur.ac.id

    BalasHapus
  29. Siang 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 : Achmad Reyhan Fazely
    Nim. : 2022500155
    Kelompok : SI2J
    Link kampus : https://www.atmaluhur.ac.id/

    BalasHapus
  30. Siang 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 : Donny Okta Sadeva
    Nim. : 2022500153
    Kelompok : SI2J
    Link kampus : https://www.atmaluhur.ac.id/

    BalasHapus
  31. hallo kak
    terimakasih artikelnya sangat bermanfaat dan juga mengajarkan saya untuk belajar membuat validasi form html menggunakan JavaScript, semangat terus untuk menulis artikelnya supaya bisa mempermudah kami lagi dalam belajar, saya harap admin bisa menambah artikel yang lebih menarik lagi.
    Perkenalkan nama saya ( Tasya Marisca - 2022500137 ) dan jangan lupa kunjungi web kampus saya di https://www.atmaluhur.ac.id

    BalasHapus
  32. Selamat malam kak
    Terimakasih kak atas artikelnya sangat bermanfaat sekali bagi saya .Dengan artikel ini dapat mempermudah saya dalam memahami bagaimana cara membuat Validasi Form HTML menggunakan JavaScript apalagi untuk saya baru belajar mengkoding.Semangat terus kak untuk menulis artkikel-artikel yang bermanfaat lainya.Perkenalkan nama saya Yasinta Kadha
    Kunjungi website kampus saya diLink ini https://www.atmaluhur .ac.id

    BalasHapus
  33. Artikelnya cukup membantu kak, Terimakasih kak.
    Ditunggu artikel-artikel terbaik selanjutnya.
    Saya Egi Mulyaningsih mahasiswa dari ISB ATMA LUHUR PANGKALPINANG.
    Kunjungi juga website kampus kami di www.atmaluhur.ac.id

    BalasHapus
  34. Hallo malam kak terimakasih atas artikelnya dengan ini saya bisa memahami dan belajar html ditunggu artikel selanjutnya kak.
    Saya anggita mahasiswa isb atmaluhur kunjungi juga website kampus kami di https://www.atmaluhur.ac.id

    BalasHapus

Dilarang SPAM Komentar!

to Top