Contoh Coding Form Login HTML, CSS, dan Bootstrap 5

Menambahkan Validasi Form di Browser

Masih di dalam script.js, tambahkan kode berikut setelah kode tombol password:

loginForm.addEventListener('submit', (event) => {
  event.preventDefault();
  event.stopPropagation();

  loginMessage.classList.add('d-none');
  loginForm.classList.add('was-validated');

  if (loginForm.checkValidity()) {
    loginMessage.classList.remove('d-none');
  }
});

Penjelasannya:

1. preventDefault() mencegah halaman dikirim dan dimuat ulang karena contoh belum mempunyai backend.
2. was-validated mengaktifkan tampilan feedback validasi Bootstrap.
3. checkValidity() memeriksa aturan HTML seperti required, type="email", dan minlength.
4. Pesan demo ditampilkan jika seluruh kolom valid.

Validasi ini berguna untuk pengalaman pengguna, tetapi masih dapat dilewati. Aplikasi sebenarnya wajib memvalidasi ulang seluruh input di server.