Kamu pasti pernah mengisi formulir online, kan? Nah, validasi form adalah salah satu hal penting yang memastikan data yang kamu masukkan benar dan sesuai. Yuk, kita bahas bagaimana cara melakukannya dengan JavaScript !
Kenapa Perlu Validasi Form?
Validasi form penting karena:
- Mencegah kesalahan: Menghindari data yang salah atau tidak lengkap.
- Menghemat waktu: Mencegah pengisian ulang form.
- Keamanan: Melindungi dari data yang berbahaya.
Persiapan Awal
Sebelum mulai, pastikan kamu sudah punya form sederhana di HTML. Contohnya:
<form id="myForm"> <label for="name">Nama:</label> <input type="text" id="name" name="name"> <br> <label for="email">Email:</label> <input type="email" id="email" name="email"> <br> <input type="submit" value="Kirim"> </form> <div id="errorMessages"></div>
Validasi dengan JavaScript
Kita akan tambahkan validasi agar form ini hanya bisa dikirim jika semua data sudah benar.
- Ambil Elemen Form
const form = document.getElementById('myForm'); const errorMessages = document.getElementById('errorMessages');
2. Tambahkan Event Listener. Kita ingin menjalankan validasi saat form dikirim.
form.addEventListener('submit', function(event) { event.preventDefault(); // Mencegah form dikirim langsung validateForm(); });
3. Buat Fungsi Validasi. Sekarang kita buat fungsi yang memeriksa apakah semua data sudah benar.
function validateForm() { let errors = []; // Validasi Nama const name = document.getElementById('name').value; if (name.trim() === '') { errors.push('Nama harus diisi.'); } // Validasi Email const email = document.getElementById('email').value; if (email.trim() === '') { errors.push('Email harus diisi.'); } else if (!validateEmail(email)) { errors.push('Email tidak valid.'); } // Tampilkan Pesan Kesalahan if (errors.length > 0) { errorMessages.innerHTML = errors.join('<br>'); } else { errorMessages.innerHTML = 'Form berhasil dikirim!'; form.submit(); // Kirim form jika tidak ada kesalahan } } function validateEmail(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(String(email).toLowerCase()); }
Selamat mencoba dan semoga berhasil!