Cara Menampilkan Error Validasi di Bawah Input dengan JavaScript

Form dengan banyak kolom sering membuat pengguna bingung saat ada isian yang salah. Pesan error yang muncul di bawah input membuat mereka langsung tahu apa yang perlu diperbaiki. Panduan ini menunjukkan cara menampilkan error validasi di bawah input menggunakan JavaScript murni, tanpa library tambahan.

Mengapa pesan error perlu tampil di bawah input

Menempatkan pesan error tepat di bawah kolom yang bermasalah mengurangi kebingungan. Pengguna tidak perlu menggulir ke atas atau mencari-cari keterangan. Posisi ini juga memudahkan pengguna yang memakai pembaca layar karena pesan error bisa dihubungkan dengan input melalui atribut aria-describedby.

Menyiapkan struktur HTML form

Mulai dengan form sederhana yang memiliki dua kolom: nama dan email. Setiap kolom dibungkus dalam <div> dengan kelas form-group, dan di bawah input disediakan elemen kosong untuk menampung pesan error.

<form id="daftarForm">
  <div class="form-group">
    <label for="nama">Nama</label>
    <input type="text" id="nama" name="nama">
    <span class="error" id="error-nama"></span>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
    <span class="error" id="error-email"></span>
  </div>
  <button type="submit">Daftar</button>
</form>

Atribut id pada elemen error memudahkan kita memilihnya lewat JavaScript. Nama id dibuat unik untuk setiap input, misalnya error-nama dan error-email.

Menulis fungsi validasi dasar

Buat fungsi yang memeriksa nilai input dan menampilkan pesan jika tidak valid. Fungsi ini mengembalikan true jika lolos validasi, atau false jika ada kesalahan.

function validasiNama(nilai) {
  if (nilai.trim() === '') {
    return 'Nama wajib diisi.';
  }
  return '';
}

function validasiEmail(nilai) {
  if (nilai.trim() === '') {
    return 'Email wajib diisi.';
  }
  const pola = /^[^s@]+@[^s@]+.[^s@]+$/;
  if (!pola.test(nilai)) {
    return 'Format email tidak valid.';
  }
  return '';
}

Setiap fungsi mengembalikan string pesan error, atau string kosong jika tidak ada masalah. Pola email di atas cukup untuk memeriksa format umum, meski tidak sepenuhnya akurat untuk semua kasus.

Menghubungkan validasi dengan elemen error

Buat fungsi yang memanggil validasi dan menaruh pesan ke elemen <span class="error"> yang sesuai. Fungsi ini juga bisa menambahkan kelas pada input untuk memberi tanda visual.

function tampilkanError(inputId, pesan) {
  const errorEl = document.getElementById('error-' + inputId);
  const inputEl = document.getElementById(inputId);
  if (pesan) {
    errorEl.textContent = pesan;
    inputEl.classList.add('input-error');
  } else {
    errorEl.textContent = '';
    inputEl.classList.remove('input-error');
  }
}

Dengan fungsi ini, kita bisa memanggil tampilkanError('nama', 'Nama wajib diisi.') dan pesan akan muncul di bawah input nama.

Menangani submit form

Pasang event listener pada form untuk mencegah pengiriman default, lalu jalankan validasi untuk setiap kolom. Jika ada error, form tidak dikirim.

document.getElementById('daftarForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const nama = document.getElementById('nama').value;
  const email = document.getElementById('email').value;

  const errNama = validasiNama(nama);
  const errEmail = validasiEmail(email);

  tampilkanError('nama', errNama);
  tampilkanError('email', errEmail);

  if (!errNama && !errEmail) {
    // lanjutkan pengiriman data
    alert('Form valid!');
  }
});

Perhatikan bahwa kita memanggil tampilkanError untuk kedua kolom, sehingga pesan error lama akan terhapus jika sudah diperbaiki.

Menambahkan validasi real-time

Agar pengguna mendapat umpan balik lebih cepat, tambahkan event blur pada setiap input. Validasi dijalankan saat pengguna meninggalkan kolom, bukan saat mengetik, supaya tidak mengganggu.

document.getElementById('nama').addEventListener('blur', function() {
  const pesan = validasiNama(this.value);
  tampilkanError('nama', pesan);
});

document.getElementById('email').addEventListener('blur', function() {
  const pesan = validasiEmail(this.value);
  tampilkanError('email', pesan);
});

Dengan begitu, pesan error muncul begitu pengguna pindah ke kolom lain, dan langsung hilang saat isian diperbaiki.

Menjaga aksesibilitas

Tambahkan atribut aria-live="polite" pada elemen error agar pembaca layar membacakan pesan saat muncul. Jangan lupa menghubungkan input dengan pesan error melalui aria-describedby.

<input type="text" id="nama" aria-describedby="error-nama">
<span class="error" id="error-nama" aria-live="polite"></span>

Langkah kecil ini membuat form lebih ramah bagi pengguna yang mengandalkan teknologi bantu.

Untuk validasi yang lebih kompleks, misalnya memeriksa ketersediaan email di database, kamu bisa menggabungkan teknik ini dengan live search atau mengirim permintaan AJAX. Pastikan validasi di sisi server tetap dilakukan, karena validasi JavaScript hanya untuk kenyamanan pengguna.

Jika kamu ingin memperluas form dengan upload file, lihat panduan cara upload file dengan PHP dan validasi aman. Prinsip menampilkan error di bawah input juga bisa diterapkan pada kolom file.

Bagi yang suka menonton olahraga, terutama basket, sepakbola, atau UFC, tarkamlive menyediakan siaran bareng gratis dengan host yang menghibur. Sambil mengerjakan proyek coding, menonton pertandingan bisa jadi hiburan ringan.

Ringkasan

Menampilkan error validasi di bawah input membutuhkan tiga komponen: elemen penampung error, fungsi validasi yang mengembalikan pesan, dan event listener pada form atau input. Dengan struktur HTML yang rapi dan sedikit JavaScript, pengguna akan lebih mudah memperbaiki isian yang salah.

Pertanyaan yang Sering Diajukan

Apakah bisa memakai library validasi seperti Parsley atau jQuery Validate?

Bisa. Library tersebut menyediakan banyak fitur siap pakai. Namun, untuk form sederhana, JavaScript murni sudah cukup dan lebih ringan.

Bagaimana menangani error dari server?

Setelah validasi klien lolos, kirim data ke server. Jika server mengembalikan error, tampilkan pesan di bawah input yang sesuai menggunakan fungsi yang sama.

Apakah perlu menambahkan CSS untuk pesan error?

Ya, beri gaya pada kelas .error agar pesan terlihat jelas, misalnya dengan warna merah dan ukuran font lebih kecil. Ini membantu pengguna cepat mengenali pesan.