Cara Membuat Validasi Form dengan JavaScript

Validasi form adalah garis pertahanan pertama untuk memastikan data yang dikirim pengguna sesuai dengan yang diharapkan aplikasi. Meski browser modern sudah memiliki validasi HTML5 bawaan seperti atribut required dan type="email", validasi dengan JavaScript memberi kita kendali penuh atas logika, tampilan pesan error, dan pengalaman pengguna yang lebih baik.

Mengapa Validasi JavaScript Diperlukan?

• Pesan error bisa dikustomisasi sesuai bahasa dan gaya desain aplikasi.
• Bisa memvalidasi kondisi yang kompleks yang tidak bisa dilakukan HTML5 saja.
• Validasi bisa dilakukan secara real-time saat pengguna mengetik.
• Konsistensi tampilan di semua browser.

Perlu diingat: validasi JavaScript hanya validasi di sisi klien. Selalu lakukan juga validasi di sisi server untuk keamanan.

Struktur HTML Form

<!-- Struktur form dasar yang akan kita validasi -->
<form id="form-registrasi">
  <div class="form-group">
    <label for="nama">Nama Lengkap</label>
    <input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap">
    <span class="pesan-error" id="error-nama"></span>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="text" id="email" name="email" placeholder="contoh@email.com">
    <span class="pesan-error" id="error-email"></span>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" name="password">
    <span class="pesan-error" id="error-password"></span>
  </div>

  <button type="submit">Daftar Sekarang</button>
</form>

Fungsi Validasi Dasar

Kita buat fungsi-fungsi kecil yang spesifik untuk setiap jenis validasi:

// Fungsi helper: tampilkan pesan error
function tampilkanError(idError, pesan) {
  const elError = document.getElementById(idError);
  elError.textContent = pesan;
  elError.style.color = 'red';
  elError.style.fontSize = '0.85em';
}

// Fungsi helper: hapus pesan error
function hapusError(idError) {
  document.getElementById(idError).textContent = '';
}

// Validasi nama — minimal 3 karakter, tidak boleh angka
function validasiNama(nilai) {
  if (!nilai.trim()) {
    return 'Nama tidak boleh kosong.';
  }
  if (nilai.trim().length < 3) {
    return 'Nama minimal 3 karakter.';
  }
  if (/\d/.test(nilai)) {
    return 'Nama tidak boleh mengandung angka.';
  }
  return ''; // kosong berarti valid
}

// Validasi email dengan regex
function validasiEmail(nilai) {
  if (!nilai.trim()) {
    return 'Email tidak boleh kosong.';
  }
  const regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!regexEmail.test(nilai)) {
    return 'Format email tidak valid. Contoh: nama@domain.com';
  }
  return '';
}

// Validasi password — minimal 8 karakter, harus ada huruf & angka
function validasiPassword(nilai) {
  if (!nilai) {
    return 'Password tidak boleh kosong.';
  }
  if (nilai.length < 8) {
    return 'Password minimal 8 karakter.';
  }
  if (!/[A-Za-z]/.test(nilai)) {
    return 'Password harus mengandung minimal satu huruf.';
  }
  if (!/[0-9]/.test(nilai)) {
    return 'Password harus mengandung minimal satu angka.';
  }
  return '';
}

Validasi Real-Time (saat Mengetik)

Memberikan umpan balik langsung saat pengguna mengetik membuat pengalaman jauh lebih baik:

const inputNama = document.getElementById('nama');
const inputEmail = document.getElementById('email');
const inputPassword = document.getElementById('password');

// Validasi saat pengguna keluar dari field (blur)
inputNama.addEventListener('blur', function() {
  const pesan = validasiNama(this.value);
  if (pesan) {
    tampilkanError('error-nama', pesan);
    this.style.borderColor = 'red';
  } else {
    hapusError('error-nama');
    this.style.borderColor = 'green';
  }
});

inputEmail.addEventListener('blur', function() {
  const pesan = validasiEmail(this.value);
  if (pesan) {
    tampilkanError('error-email', pesan);
    this.style.borderColor = 'red';
  } else {
    hapusError('error-email');
    this.style.borderColor = 'green';
  }
});

// Validasi saat mengetik untuk password (real-time)
inputPassword.addEventListener('input', function() {
  const pesan = validasiPassword(this.value);
  if (pesan) {
    tampilkanError('error-password', pesan);
  } else {
    hapusError('error-password');
  }
});

Validasi Saat Submit

Selain validasi real-time, pastikan semua field divalidasi saat form di-submit:

const form = document.getElementById('form-registrasi');

form.addEventListener('submit', function(e) {
  e.preventDefault(); // Cegah pengiriman form secara default

  const nilaiNama = inputNama.value;
  const nilaiEmail = inputEmail.value;
  const nilaiPassword = inputPassword.value;

  const errorNama = validasiNama(nilaiNama);
  const errorEmail = validasiEmail(nilaiEmail);
  const errorPassword = validasiPassword(nilaiPassword);

  // Tampilkan semua error
  if (errorNama) tampilkanError('error-nama', errorNama);
  else hapusError('error-nama');

  if (errorEmail) tampilkanError('error-email', errorEmail);
  else hapusError('error-email');

  if (errorPassword) tampilkanError('error-password', errorPassword);
  else hapusError('error-password');

  // Jika semua valid (tidak ada pesan error)
  const semuaValid = !errorNama && !errorEmail && !errorPassword;

  if (semuaValid) {
    console.log('Form valid! Siap dikirim ke server.');
    console.log({
      nama: nilaiNama,
      email: nilaiEmail,
      password: nilaiPassword
    });
    // Di sini kamu bisa melakukan fetch/axios untuk kirim data ke server
    alert('Registrasi berhasil!');
    form.reset();
  } else {
    // Fokus ke field pertama yang error
    const fieldError = [
      { el: inputNama, err: errorNama },
      { el: inputEmail, err: errorEmail },
      { el: inputPassword, err: errorPassword }
    ].find(item => item.err);

    if (fieldError) fieldError.el.focus();
  }
});

Kesimpulan

Validasi form dengan JavaScript memungkinkan kita memberikan pengalaman pengguna yang jauh lebih baik dibanding hanya mengandalkan validasi HTML5. Dengan memisahkan fungsi validasi per field, menampilkan error secara real-time, dan melakukan pengecekan lengkap saat submit, form kamu akan lebih ramah pengguna dan datanya lebih terpercaya. Selalu ingat untuk menambahkan validasi serupa di sisi server sebagai lapisan keamanan tambahan.