Validasi Form dengan JavaScript

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:

1. Mencegah kesalahan: Menghindari data yang salah atau tidak lengkap.
2. Menghemat waktu: Mencegah pengisian ulang form.
3. 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.

1. 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!