Membuat Validasi JavaScript Pada Form HTML


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:

See the Pen Form HTML dengan Validasi JavaScript by edisutanto (@edisutanto) on CodePen.



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

- Salam -



Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "Membuat Validasi JavaScript Pada Form HTML"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -