Form Selalu Reload? Cara Mencegah Form Submit dengan Javascript yang Benar

Ditulis oleh JavaScript

Form reload karena perilaku bawaan browser mengirim request dan memuat ulang halaman. Cara mencegah form submit dengan JavaScript yang benar adalah memasang listener pada event submit milik form, lalu memanggil event.preventDefault() di baris pertama. Kesalahan yang paling sering terjadi adalah memasang listener di klik tombol, sehingga submit lewat tombol Enter tetap lolos dan halaman reload.

Gunakan preventDefault di Event Submit

Pasang listener ke elemen form, bukan ke tombol. Event submit menangkap semua jalur pengiriman, termasuk Enter dari input teks dan tombol submit.

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

form.addEventListener("submit", function(event) {
  event.preventDefault();
  console.log("Submit ditahan, halaman tidak reload.");
});

Kode di atas menahan reload. Setelah itu, baca nilai input memakai FormData atau value, lalu lanjutkan ke validasi atau fetch.

Perbandingan Metode Penahan Submit

Tiga cara ini sering tertukar, padahal perilakunya berbeda.

Metode Cocok Untuk Catatan
preventDefault Form modern Menahan submit tanpa mematikan validasi HTML
return false Handler inline lama Tidak konsisten pada addEventListener
type=”button” Tombol aksi tambahan Tombol tidak memicu submit sama sekali
  • Gunakan preventDefault bila form butuh validasi lalu dikirim lewat JavaScript.
  • Gunakan submit bersyarat bila data boleh terkirim normal saat valid, dan ditahan hanya saat tidak valid.
  • Periksa selector form, pastikan skrip berjalan setelah DOM tersedia, dan pastikan hanya ada satu listener submit.

BACA JUGA:

Validasi sebelum Kirim Data

Tahan submit dahulu, validasi kemudian. Pola ini membuat alur lebih mudah dibaca.

  1. Ambil nilai input dari form.
  2. Cek setiap aturan, lalu tampilkan pesan kesalahan di dekat input.
  3. Hentikan proses bila ada input tidak valid.
  4. Kirim data memakai fetch hanya bila semua input lolos.
  • Field wajib diisi.
  • Format email dan pola teks.
  • Panjang minimum dan maksimum.
  • Tipe angka, tanggal, dan ukuran file.

Validasi frontend mempercepat umpan balik, tetapi validasi server tetap wajib karena request dapat dibuat di luar browser.

FAQ

Kenapa form tetap reload padahal sudah pakai JavaScript?

Listener kemungkinan terpasang pada tombol, bukan form, atau skrip berjalan sebelum form ada di DOM.

Apakah return false sama dengan preventDefault?

Tidak, return false tidak zuverläss menahan submit pada addEventListener, gunakan preventDefault.

Kapan submit boleh dibiarkan berjalan normal?

Biarkan berjalan normal bila aplikasi memang memakai pengiriman HTML standar tanpa JavaScript lanjutan.

Artikel Terkait