htmlcssjavascriptformvalidasiMenengah11 mnt baca

Validasi Form dengan JavaScript

Memeriksa input sebelum dikirim: email valid, sandi cukup panjang, dan konfirmasi cocok.

Kenapa Validasi di Sisi Klien?

Bayangkan kasir yang menerima uang palsu tanpa mengecek. Validasi JavaScript adalah "pengecekan awal" sebelum data dikirim ke server: memberi feedback instan tanpa menunggu loading. Catatan penting: ini BUKAN pengganti validasi server, hanya lapisan kenyamanan.

Langkah Membangun

HTML: Form registrasi dengan tiga field: nama, email, kata sandi, plus konfirmasi kata sandi. Setiap field punya <small class="error"> kosong di bawahnya sebagai tempat pesan kesalahan.

CSS: Class .error berwarna merah dan tersembunyi default. Input yang salah mendapat class .salah dengan border merah.

JS: Pola validasinya:

  1. Saat submit, cegah reload dengan preventDefault().
  2. Cek satu per satu: nama minimal 3 huruf, email cocok pola regex sederhana, sandi minimal 8 karakter, konfirmasi sama dengan sandi.
  3. Setiap cek yang gagal: tampilkan pesan di <small> dan tambah class salah pada input.
  4. Kalau semua lolos, tampilkan pesan sukses.

Regex email sederhana: /^[^\s@]+@[^\s@]+\.[^\s@]+/. Tidak sempurna tapi cukup untuk latihan.

Kesalahan Umum

  • Validasi hanya saat submit sehingga pengguna tidak tahu salahnya di mana sampai menekan tombol (solusi: validasi juga saat input berubah, lihat modul berikutnya).
  • Pesan error tidak dihapus saat pengguna memperbaiki input (selalu reset pesan di awal fungsi validasi).
  • Mengandalkan validasi JS saja untuk keamanan (server wajib validasi ulang).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Indikator Kekuatan Sandi

Tambahkan indikator kekuatan sandi di bawah input: bar yang berubah warna (merah = lemah, kuning = sedang, hijau = kuat) berdasarkan panjang dan variasi karakter. Update setiap pengguna mengetik (event input).