Summary Errors
Menambahkan error summary setelah submit gagal agar user memahami seluruh masalah dan dapat menuju field terkait.
Tujuan belajar
- Menjelaskan peran error summary pada form dengan beberapa error
- Menulis daftar error yang merujuk ke label serta field terkait
- Membedakan error summary dari inline error
- Menggunakan feedback form-level tanpa menghapus konteks field-level
Isi lesson
6 blok- 1.Satu error perlu konteks lokal; banyak error perlu petaBelum selesaiWajib
- 2.Error summary yang menuju field terkaitBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Ringkas tetapi jangan kaburBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Satu error perlu konteks lokal; banyak error perlu peta
WajibInline error memberi konteks tepat di dekat field. Namun setelah submit gagal pada form panjang, user juga perlu tahu bahwa ada beberapa hal yang harus diperbaiki. Error summary di atas form menjawab pertanyaan itu dan memberi jalur cepat ke field terkait. Summary tidak menggantikan inline error; keduanya bekerja bersama.
Gunakan heading yang jelas, jumlah atau daftar masalah yang mudah dipindai, dan link ke field bila memungkinkan. Jangan menyalin pesan terlalu teknis atau menyembunyikan error di toast yang menghilang. Jika error berubah secara dinamis setelah submit, container notifikasi harus ditangani dan diuji dengan teknologi bantu pada app lokal.
Bagian ini memengaruhi progres lesson.
Error summary yang menuju field terkait
Wajibtype ProfileErrors = {
displayName?: string;
email?: string;
};
function ErrorSummary({ errors }: { errors: ProfileErrors }) {
const entries = Object.entries(errors);
if (entries.length === 0) {
return null;
}
return (
<section role="alert" aria-labelledby="profile-error-summary-title">
<h2 id="profile-error-summary-title">
Periksa {entries.length} field sebelum menyimpan
</h2>
<ul>
{entries.map(([field, message]) => (
<li key={field}>
<a href={"#" + field}>{message}</a>
</li>
))}
</ul>
</section>
);
}Daftar menampilkan masalah dalam teks dan setiap item mengarah ke id field. Tulis pesan yang tetap bermakna saat dibaca tanpa melihat input, misalnya "Email: masukkan alamat yang valid". Periksa implementasi akhir dengan keyboard serta screen reader pada project lokal.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususAdd profile error summary
Buat error summary yang merangkum masalah profile dan menghubungkan setiap pesan ke field terkait. Preview tidak menjalankan submit form.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Kapan error summary paling bernilai bagi user?
Progres lesson naik setelah jawaban benar.
Catatan penting
WajibRingkas tetapi jangan kabur
"Ada error di form" lebih baik daripada tidak ada feedback, tetapi belum cukup. Sebutkan field dan cara perbaikan, misalnya "Email: masukkan alamat yang valid". Hindari menaruh data sensitif, raw response server, atau detail internal database di summary maupun inline error.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Error summary memberi peta masalah setelah submit gagal.
- Summary dan inline error saling melengkapi, bukan saling menggantikan.
- Link summary sebaiknya menuju field terkait dan copy tetap bermakna tanpa konteks visual.
- Notifikasi dinamis perlu diuji dengan keyboard serta teknologi bantu pada app lokal.
- Berikutnya, focus management menentukan ke mana perhatian user bergerak setelah feedback muncul.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Satu error perlu konteks lokal; banyak error perlu peta.