Validasi Form

Memeriksa input pengguna sebelum dikirim.

Part 14 dari 16 ± 25 menit Gratis

Mengapa validasi?

Pengguna bisa salah ketik atau mengosongkan kolom. Validasi memberi tahu mereka saat itu juga, sebelum data dikirim ke server. (Server tetap harus memeriksa ulang, karena JavaScript bisa dilewati.)

Mencegah form terkirim

Secara bawaan form akan memuat ulang halaman saat dikirim. Panggil e.preventDefault() untuk membatalkannya.

form.addEventListener("submit", (e) => {
  const email = form.querySelector("#email").value.trim();

  if (!email.includes("@")) {
    e.preventDefault();
    pesan.textContent = "Email tidak valid";
    return;
  }
  pesan.textContent = "";
});

Aturan yang umum

  • Kolom wajib tidak boleh kosong: value.trim() === ""
  • Panjang minimal: password.length < 8
  • Format email, nomor telepon, dan sebagainya

Alur berpikir

  1. Ambil nilai input.
  2. Periksa dengan if.
  3. Jika salah: preventDefault() + tampilkan pesan.
  4. Jika benar: kosongkan pesan, biarkan form terkirim.

Praktikkan langsung, gratis

Tulis dan jalankan kode langsung di browser, dapatkan penilaian otomatis. Daftar gratis kapan saja untuk menyimpan progres dan meraih sertifikat.

Coba latihan sekarang, tanpa daftar
Bagikan: WhatsApp Facebook LinkedIn X