mahirdomformeventMahir3 mnt baca

Form Event dan Validasi

Menangani form: event submit, input, change, membaca nilai input, dan validasi sederhana.

Form adalah gerbang data pengguna

Formulir adalah cara utama pengguna mengirim data: login, pendaftaran, pencarian. JavaScript memberi kontrol penuh atas perilaku form lewat event.

Menangani submit

javascript

let form = document.querySelector("#form-login");

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

  let username = document.querySelector("#username").value;
  let password = document.querySelector("#password").value;

  console.log("Login sebagai: " + username);
  // kirim ke server via fetch (modul fetch-api)
});

Properti value mengambil isi input. preventDefault wajib agar halaman tidak reload dan kamu bisa memproses data sendiri.

Event input vs change

javascript

let nama = document.querySelector("#nama");

// input: jalan setiap ada perubahan (tiap ketikan)
nama.addEventListener("input", (e) => {
  console.log("Diketik: " + e.target.value);
});

// change: jalan setelah selesai (blur atau Enter)
nama.addEventListener("change", (e) => {
  console.log("Final: " + e.target.value);
});

Event input cocok untuk live preview atau validasi real-time, change untuk konfirmasi akhir.

Validasi sederhana

javascript

form.addEventListener("submit", (e) => {
  e.preventDefault();
  let email = document.querySelector("#email").value.trim();
  let error = document.querySelector("#error");

  if (!email.includes("@")) {
    error.textContent = "Email tidak valid";
    return; // berhenti, jangan kirim
  }
  error.textContent = "";
  console.log("Email valid, lanjut kirim...");
});

Membaca berbagai tipe input

javascript

let checkbox = document.querySelector("#setuju");
console.log(checkbox.checked); // true/false, bukan value

let pilihan = document.querySelector('input[name="gender"]:checked');
console.log(pilihan ? pilihan.value : "belum dipilih");

let select = document.querySelector("#kota");
console.log(select.value); // option yang terpilih

Checkbox memakai checked, radio memakai :checked untuk yang terpilih, select langsung value.

Catatan teknis: Validasi JavaScript hanya untuk UX, bukan keamanan. Pengguna bisa mematikan JavaScript atau mengirim request langsung. Validasi yang menentukan (apakah email unik, apakah user berhak) harus selalu diulang di server.

Studi kasus: validasi password kembar

Kasus klasik form pendaftaran, memastikan dua field password sama:

javascript

let form = document.querySelector("#form-daftar");
let pw1 = document.querySelector("#pw1");
let pw2 = document.querySelector("#pw2");
let info = document.querySelector("#info-pw");

// cek langsung saat mengetik
pw2.addEventListener("input", () => {
  if (pw2.value && pw2.value !== pw1.value) {
    info.textContent = "Password tidak sama!";
    info.style.color = "red";
  } else {
    info.textContent = "";
  }
});

form.addEventListener("submit", (e) => {
  if (pw1.value !== pw2.value || pw1.value.length < 8) {
    e.preventDefault();
    info.textContent = "Periksa kembali passwordmu!";
    info.style.color = "red";
  }
});

Validasi ganda: real-time saat mengetik untuk UX, dan saat submit sebagai jaring pengaman. Keduanya memakai logika yang sama agar konsisten.

Kesimpulan

Pola form standar: dengarkan submit, preventDefault, ambil value, validasi, lalu kirim. Kuasai pola ini karena hampir setiap aplikasi web punya minimal satu form.