Form handling dan validasi

Input, select, textarea, validasi, submit event.

Pahami konsepnya

Form adalah cara pengguna memasukkan data. Tiap input punya .value untuk membaca/menulis nilai. input.value string; checkbox.checked boolean; select.value nilai option yang dipilih. e.preventDefault() pada submit mencegah halaman reload — tangani data di JavaScript.

Validasi sederhana: periksa input.value.trim() !== "" untuk wajib isi; input.value.length untuk panjang minimum; regex untuk format email. Tambahkan pesan error di elemen span di samping input. HTML5 validasi bawaan: atribut required, minlength, pattern — browser memeriksa otomatis; form.checkValidity() memberi boolean.

Untuk mengambil seluruh data form sekaligus: new FormData(form) memberi iterator pasangan [nama, nilai] dari semua input bernama.

Coba contoh kode

<!doctype html>
<html>
<body>
  <form id="daftar">
    <input name="nama" placeholder="Nama" required>
    <input name="email" type="email" placeholder="Email" required>
    <button type="submit">Daftar</button>
  </form>
  <p id="pesan"></p>

  <script>
    const form = document.getElementById("daftar");
    const pesan = document.getElementById("pesan");

    form.addEventListener("submit", (e) => {
      e.preventDefault();  // jangan reload!

      const data = new FormData(form);
      const nama = data.get("nama");
      const email = data.get("email");

      if (nama.trim().length < 2) {
        pesan.textContent = "Nama terlalu pendek.";
        return;
      }

      pesan.textContent = `Terdaftar: ${nama} <${email}>`;
      form.reset();
    });
  </script>
</body>
</html>

preventDefault mencegah halaman reload saat submit. FormData mengambil semua input bernama sekaligus. Validasi manual memeriksa panjang nama sebelum menerima.

Latihan singkat

Uji: validasi nama minimal 2 karakter dan email mengandung @ — validasi("A","a@b") harus `nama terlalu pendek`.