Step 8 - Validasi Form Dan Alur Aksi

Membuat validasi form yang ramah manusia: cepat dipahami, jelas diperbaiki, dan aman dikirim.

Validasi bagus bukan yang paling ketat, tapi yang paling membantu user menyelesaikan tujuan.

Prinsip validasi praktikal

• validasi sedekat mungkin dengan input
• pesan error harus menyebut solusi
• jangan menunggu submit untuk semua kasus

Step praktik

Step 1: Validasi per field

function validateEmail(value) {
  const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
  return ok ? '' : 'Email tidak valid. Contoh: nama@email.com';
}

Step 2: Tampilkan pesan tepat di bawah field

Jangan taruh semua error di atas halaman. User harus tahu field mana yang salah.

Step 3: Cegah submit jika ada error

Validasi client-side mempercepat, tapi tetap validasi server-side untuk keamanan.

Step 4: Beri konfirmasi sukses

Sukses tanpa konfirmasi juga membuat user ragu.

Studi kasus nyata

Kasus: Form konsultasi website

Masalah: user sering kirim data kosong karena field wajib tidak jelas.
Solusi: validasi realtime + pesan spesifik + highlight field.

Hasil:

• data masuk lebih lengkap
• waktu follow-up tim lebih singkat
• user percaya form bekerja benar

Checklist latihan

• Validasi email dan nomor telepon
• Tampilkan pesan error per field
• Cegah submit jika ada error
• Tampilkan pesan sukses setelah submit valid

Checklist mengingat

• Error message harus memberi arah, bukan hanya menolak
• Validasi client-side tidak menggantikan server-side
• Fokus kembali ke field error pertama saat submit gagal

Mini proyek

Buat form “Booking Meeting” dengan field:

• nama
• email
• tanggal
• catatan

Validasi semua field dan tampilkan ringkasan hasil submit.

Progress belajar

Progress belajar topik JS: 40%