Validasi Form Otomatis

Validasi form adalah elemen penting ketika membangun tools online seperti generator dokumen, form UMKM, atau aplikasi web lainnya. Dengan validasi otomatis, pengguna dapat mengisi data dengan benar tanpa error dan menghindari input yang tidak lengkap atau salah format.

1. Kenapa Perlu Validasi Otomatis?

• Mencegah kesalahan input sejak awal.
• Mempercepat proses pengisian.
• Mengurangi error pada hasil output (PDF/DOC).
• Meningkatkan UX (User Experience).

2. Struktur Dasar Validasi Form

<form id="formData">
  <input type="text" id="nama" placeholder="Nama Lengkap" />
  <span class="error" id="err_nama"></span>

  <input type="email" id="email" placeholder="Email" />
  <span class="error" id="err_email"></span>

  <button type="button" onclick="validateForm()">Kirim</button>
</form>

3. Validasi Real-Time dengan JavaScript

// validasi real-time
document.getElementById("nama").addEventListener("input", function () {
  if (this.value.length < 3) {
    document.getElementById("err_nama").innerText = "Nama minimal 3 karakter";
  } else {
    document.getElementById("err_nama").innerText = "";
  }
});

4. Validasi Email dengan Regex

function isEmailValid(email) {
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pattern.test(email);
}

5. Validasi Form Lengkap

function validateForm() {
  const nama = document.getElementById("nama").value;
  const email = document.getElementById("email").value;

  let valid = true;

  if (nama.length < 3) {
    document.getElementById("err_nama").innerText = "Nama terlalu pendek";
    valid = false;
  }

  if (!isEmailValid(email)) {
    document.getElementById("err_email").innerText = "Format email salah";
    valid = false;
  }

  if (valid) {
    alert("Form valid! Siap diproses.");
  }
}

6. Menambahkan Highlight Error Otomatis

input.error {
  border: 2px solid #ff4c4c;
  background: #ffecec;
  border-radius: 6px;
}

Dengan highlight otomatis, pengguna dapat dengan cepat melihat bagian mana yang perlu diperbaiki.

7. Best Practice Validasi Form Modern

• Gunakan validasi real-time (live validation).
• Tampilkan pesan error yang singkat dan jelas.
• Gunakan warna lembut, hindari warna merah keras.
• Gunakan debounce untuk input yang sensitif.
• Jangan hanya mengandalkan HTML required — gunakan JS juga.
• Gabungkan dengan server-side validation untuk keamanan.

Dengan validasi otomatis, form pada web tools Anda akan jauh lebih profesional, mudah digunakan, dan meminimalkan error input dari pengguna.