Membuat Validasi Javascript Pada Form Html
- Validasi JavaScript yakni hukum yang boleh dan tidak diisi didalam sebuah inputan. Kaprikornus kalau kita menciptakan 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, sanggup di inputkan kedalam database atau juga hanya memastikan validan nya.
Apa pengaruh 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 eksklusif diproses.
Efeknya adalah:
- Bisa mengakibatkan data yang buruk.
- Data yang di inginkan tidak sesuai.
- Celah untuk orang iseng lebih besar, alasannya yakni data apapun sanggup dimasukkan.
Membuat Validasi JavaScript Pada Form HTML
Form HTML yang baik yakni form yang terbentuk secara rapi dan terdapat validasi data. Artinya tidak semua data sanggup masuk tanpa proses filterisasi.
Contoh saja website Google, untuk proses login/signin, didalam formnya akan ditemukan validasi data dikala kita salah dalam memasukkan data. Misal kita memasukkan Username: , maka akan ditolak oleh validasi google alasannya yakni pada umumnya username seseorang tidak memakai tanda baca titik (.). Kurang lebih klarifikasi singkat Validasi JavaScript menyerupai itu.
Dan bagaimana cara membuatnya? hening disini akan aku terangkan cara menciptakan Validasi JavaScript didalam Form HTML.
Langkah pertama membuat Validasi JavaScript didalam Form HTML yakni menciptakan instruksi JavaScript yang berisi perintah-perintah/function untuk merender atau memfilter daripada Inputan. Kedua kita akan menciptakan Form HTML nya itu sendiri, dengan diberikan tombol Submit untuk proses lebih lanjut dan event onClick untuk menyambungkan dengan function JavaScript yang sudah dibentuk dilangkah pertama.
Baca juga : Membuat From HTML
Pada kesempatan ini aku akan memperlihatkan simple Form HTML dengan 3 unit inputan, seperti: Nama, No. Telp dan Email. Ketiga inputan ini masing-masing validasi berbeda sehingga sekiranya sanggup dijadikan pola untuk latihan.
Cara Membuat Form HTML dengan Validasi JavaScript
Ada 3 pola bab inputan didalam Form:
1. Nama
Saya akan memperlihatkan Validasi berupa inputan hanya boleh mengguankan Huruf/Alphabet saja. Contoh: Muhammad (benar), Ridwan001 (salah).
Dibawah ini cuilan instruksi 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 menciptakan nama function Alphabet, dengan parameter dinamis yaitu (nilai, pesan).
- Data yang boleh dimasukkan yakni berupa "a-zA-Z".
- Jika selain data "a-zA-Z" ini dimasukkan, maka akan muncul pesan Alert "alert(pesan);".
2. No. Telp
Pada bab ini akan aku berikan validasi berupa hanya nomor/angka saja yang boleh di inputkan, contoh: 12345 (benar), 123AB (salah).
Dibawah ini cuilan instruksi 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))" yakni string.match(), mencari string memakai Regular Expression (Regex). Pembahasan regular expression akan dibahas dilain kesempatan.
- Jika salah atau inputan tidak benar maka akan ada pesan alert "alert(pesan);".
3. Email
Pada email akan diberikan validasi masih berupa Regular Expression. Contoh: senikoding@gmail.com (benar), senikoding@gmail (salah).
Potongan instruksi 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:
- menciptakan 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.
4. Validasi pemanis (pesan)
Validasi ini hanya pemanis yaitu pesan alert yang disampaikan sehabis 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 instruksi 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 berjulukan "validasi()".
Baca juga : Belajar Event Jquery
Akhirnya potongan-potongan instruksi Validasi JavaScript Pada Form HTML sudah dibuat, dan kalau digabungkan seluruh kode Validasi dan Form HTML diatas akan menjadi menyerupai 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, supaya bermanfaat. Jika bermanfaat jangan lupa di Share ya gaess :).
Ada pertanyaan perihal Belajar JAVASCRIPT ?
- Salam -