Pesan Error Form yang Ramah
Validasi real-time saat mengetik plus pesan error yang membantu, bukan menakuti.
Masalah dengan Validasi Biasa
Modul sebelumnya memvalidasi saat tombol ditekan. Itu seperti guru yang baru memberi tahu jawabanmu salah setelah ulangan dikumpulkan. Pengalaman yang lebih baik: beri tahu saat pengguna mengetik, dengan bahasa yang membantu ("Email butuh tanda @ ya") bukan yang menghakimi ("Input tidak valid!").
Langkah Membangun
HTML: Sama seperti form registrasi, tapi tiap input dibungkus <div class="field"> berisi label, input, ikon status (✓/✗), dan pesan error.
CSS: Ikon status diposisikan absolut di kanan dalam input. Field valid: border hijau + ikon ✓ hijau. Field salah: border merah + ikon ✗ merah + pesan muncul dengan animasi geser kecil.
JS: Dengarkan event input pada setiap field (bukan submit). Setiap kali pengguna mengetik, jalankan fungsi cek khusus field itu dan update tampilan langsung. Saat submit, jalankan semua cek; kalau ada yang gagal, fokuskan ke field pertama yang salah dengan .focus().
Prinsip UX yang Dipakai
- Validasi optimis: jangan tandai salah saat field masih kosong dan belum disentuh.
- Bahasa manusia: "Kata sandi minimal 8 karakter ya" lebih baik dari "Error 422".
- Satu masalah satu waktu: tampilkan error paling penting dulu.
Kesalahan Umum
- Memvalidasi saat halaman baru dibuka sehingga semua field langsung merah (tunggu interaksi dulu).
- Pesan error hilang-timbul terlalu cepat hingga mengganggu (beri jeda wajar, validasi per field bukan per huruf untuk aturan kompleks).
export default function App(): JSX.Element { return <h1>Hello world</h1> }
Tantangan
Tantangan: Saran Perbaikan Otomatis
Saat email tidak valid karena pengguna lupa mengetik domain (misal "budi@gmail"), tampilkan saran di bawah pesan error: "Mungkin maksudmu [email protected]?" yang kalau diklik otomatis mengisi input.