Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang lagi ngebangun alur user nyata: signup, login, checkout, edit profil
• Pemula yang capek sama logic form yang berantakan dan validasi yang random
• Siapa pun yang ingin form terasa mulus, jelas, dan bisa dipercaya

Apa yang akan Anda pelajari

• Pola controlled input yang tetap enak dipakai saat field mulai banyak
• Strategi validasi praktis dengan feedback UX yang jelas
• Pengelolaan submit lifecycle: idle, validating, loading, success, dan error

Mengapa topik ini penting

Kualitas aplikasi paling cepat kelihatan dari form. Kalau form terasa rusak, user cepat pergi.

Arsitektur form yang baik bikin codebase lebih rapi, error validasi dari backend berkurang, dan kepercayaan user naik. Ini salah satu skill React dengan impact paling besar.

Konsep inti

Controlled components

• Nilai input dikendalikan state React
• Single source of truth

Saat input dikontrol penuh oleh state, UI dan data tidak gampang out-of-sync.

Validasi

• Cek per field (wajib, format, panjang minimum)
• Cek tingkat form sebelum submit

Tujuan validasi bukan sekadar “nolak input,” tapi ngarahin user ke hasil valid secepat mungkin.

Submit states

• Loading, success, dan error feedback
• Disable submit saat invalid atau sedang mengirim data

Anggap submit sebagai lifecycle, bukan sekadar event klik tombol.

Panduan langkah demi langkah

Langkah 1 — Susun model state form

Bikin satu model state untuk:

• nilai field,
• error per field,
• status submit.

Langkah 2 — Tambahkan fungsi validasi reusable

Tulis helper validasi kecil yang output pesannya konsisten.

Pakai pesan yang manusiawi: jelas, langsung, dan ada arah perbaikannya.

Langkah 3 — Atur lifecycle submit

Flow yang direkomendasikan:

1. Bersihkan error lama
2. Jalankan validasi
3. Stop kalau masih invalid
4. Kirim request
5. Tampilkan state sukses/gagal dengan jelas

Contoh praktis

Contoh 1 — Controlled input

const [email, setEmail] = useState("");
<input value={email} onChange={(e) => setEmail(e.target.value)} />;

Tip:

• Controlled input bikin validasi dan UI kondisional jauh lebih mudah diatur.

Contoh 2 — Validasi sederhana

function validateEmail(value: string): string | null {
	if (!value.includes("@")) return "Email is invalid";
	return null;
}

Next step:

• Kembangkan pola ini ke validateForm(values) yang mengembalikan object error.

Kesalahan umum dan cara menghindarinya

• Validasi hanya saat submit -> beri feedback langsung untuk field penting
• Format error tidak konsisten -> standarkan bentuk output validasi
• Tombol submit tetap aktif saat loading -> user bisa kirim request ganda
• Pesan error backend teknis ditampilkan mentah -> mapping ke pesan yang ramah user

Mini Project

• Buat signup form dengan:
• validasi real-time untuk email dan password,
• loading state saat submit,
• alert sukses dan error yang jelas,
• tombol submit nonaktif selama request berjalan.

Bonus:

• Tambahkan validasi konfirmasi password dan hint kekuatan password.

Latihan cepat

• Tambahkan validasi required dan format email
• Tampilkan error message per field
• Cegah submit saat ada error validasi
• Tambahkan area error umum di level form untuk error dari server

Ringkasan utama

• Controlled input membuat alur data lebih prediktif
• Validasi harus membantu user pulih cepat, bukan cuma menolak input
• Submit-state yang jelas mencegah request dobel dan kebingungan user

Langkah berikutnya

Lanjut ke [12. Routing dan Struktur Aplikasi].