Membuat Form Validasi dengan Javascript

Membuat Form Validasi dengan Javascript adalah langkah penting untuk memastikan data yang masuk ke sistem kalian rapi, aman, dan sesuai format.

Halo teman-teman, semoga kabar kalian baik! Pada artikel ini kodelyly.com akan membahas cara praktis membangun validasi form di sisi klien menggunakan JavaScript modern sehingga pengalaman pengguna tetap nyaman tanpa harus memuat ulang halaman.

Membuat Form Validasi Dengan Javascript

Konsep Dasar Validasi

Validasi di sisi klien bertujuan mencegah input tidak sesuai sebelum terkirim ke server. Prinsip utamanya adalah menyaring data sedini mungkin, memberi umpan balik yang jelas, dan tetap mengirimkan data hanya jika semua syarat terpenuhi. Di HTML, banyak atribut yang membantu seperti required, minlength, dan tipe input email atau number. Di JavaScript, kalian bisa menambahkan logika khusus seperti pola regex untuk email, panjang minimal password, dan menampilkan pesan error yang ramah.

Contoh Kode HTML + JS (Validasi Dasar)

Berikut contoh sederhana form pendaftaran dengan validasi nama, email, dan password. Kalian bisa menyalin dan menjalankannya langsung.

<form id="signupForm" novalidate>
  <label>Nama</label>
  <input type="text" id="nama" required minlength="3" placeholder="Nama lengkap">

  <label>Email</label>
  <input type="email" id="email" required placeholder="nama@contoh.com">

  <label>Password</label>
  <input type="password" id="password" required minlength="6" placeholder="Minimal 6 karakter">

  <button type="submit">Daftar</button>
  <small id="msg"></small>
</form>

<script>
const form = document.getElementById("signupForm");
const msg  = document.getElementById("msg");

form.addEventListener("submit", function(e){
  e.preventDefault();
  const nama = document.getElementById("nama").value.trim();
  const email = document.getElementById("email").value.trim();
  const pass = document.getElementById("password").value;

  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  if(nama.length < 3){
    msg.textContent = "Nama minimal 3 karakter.";
    msg.style.color = "red"; return;
  }
  if(!emailOk){
    msg.textContent = "Format email tidak valid.";
    msg.style.color = "red"; return;
  }
  if(pass.length < 6){
    msg.textContent = "Password minimal 6 karakter.";
    msg.style.color = "red"; return;
  }

  msg.textContent = "Valid! Form siap dikirim.";
  msg.style.color = "green";
  // form.submit(); // aktifkan ini jika ingin benar-benar mengirim
});
</script>

Penjelasan singkat: atribut HTML seperti required dan minlength menjadi pagar awal, sementara JavaScript memeriksa pola email dan menampilkan pesan yang jelas. Umpan balik segera membuat pengguna cepat memperbaiki kesalahan.

Tabel Aturan Validasi Yang Disarankan

Tips SEO Dan UX Singkat

Tempatkan form di area yang mudah terlihat dan beri label yang deskriptif. Gunakan placeholder seperlunya agar tidak membingungkan. Sertakan atribut autocomplete yang tepat agar pengisian lebih cepat. Untuk SEO, ulasan halaman yang memuat topik validasi form sebaiknya memiliki judul, deskripsi, dan heading yang memuat kata kunci terkait seperti “validasi form”, “JavaScript”, dan “client-side validation”.

Baca Juga:
Membuat Format Rupiah Dengan Javascript

Kesimpulan

Membuat Form Validasi dengan Javascript membantu memastikan data yang masuk ke aplikasi kalian konsisten dan aman, sekaligus meningkatkan pengalaman pengguna dengan umpan balik instan. Mulailah dari atribut HTML bawaan, lalu lengkapi dengan logika JavaScript untuk kebutuhan khusus. Sekian artikel dari kodelyly.com, semoga bermanfaat dan selamat mencoba!.