Inline Errors
Menempatkan pesan error dekat field yang perlu diperbaiki dan menulis copy yang membantu user pulih.
Tujuan belajar
- Menjelaskan alasan error perlu muncul dekat field yang bermasalah
- Menulis error yang menyebut masalah serta langkah perbaikannya
- Menghubungkan input, invalid state, dan pesan error secara programatis
- Menghindari validasi yang menyalahkan atau mengganggu user terlalu dini
Isi lesson
6 blok- 1.Error harus membantu user kembali ke jalur yang benarBelum selesaiWajib
- 2.Email error yang dekat, spesifik, dan terhubungBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan memvalidasi setiap ketikan tanpa pertimbanganBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Error harus membantu user kembali ke jalur yang benar
WajibValidation bukan hanya aturan yang menolak submit. Ia adalah feedback untuk membantu user memahami apa yang perlu diperbaiki. Saat email salah, letakkan pesan dekat field email, sebutkan masalahnya, lalu jelaskan format yang diterima. Pesan seperti "Input tidak valid" tidak memberi cukup arah.
Tunda error sampai user punya konteks yang cukup, misalnya setelah field disentuh, setelah blur, atau setelah submit gagal. Menampilkan semua error saat form baru dibuka membuat form terasa seperti sudah menyalahkan user. Pilihan timing perlu mengikuti risiko dan panjang form, bukan satu aturan universal.
Bagian ini memengaruhi progres lesson.
Email error yang dekat, spesifik, dan terhubung
Wajibtype InlineErrorProps = {
id: string;
message?: string;
};
function InlineError({ id, message }: InlineErrorProps) {
if (!message) {
return null;
}
return (
<p id={id + "-error"} role="alert">
{message}
</p>
);
}
export function EmailField({ error }: { error?: string }) {
return (
<div>
<label htmlFor="email">Email</label>
<input
id="email"
type="email"
aria-invalid={Boolean(error)}
aria-describedby={error ? "email-error" : undefined}
/>
<InlineError id="email" message={error} />
</div>
);
}Label memberi nama input. Ketika error tersedia, aria-invalid menyatakan statusnya dan aria-describedby merujuk ke pesan yang menjelaskan masalah. Teks error tetap penting; warna border merah saja tidak cukup untuk menjelaskan apa yang harus dilakukan.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususShow useful inline profile error
Lengkapi field email dengan invalid state dan pesan inline yang menjelaskan cara memperbaiki input. Preview tidak menjalankan validation React.
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
Manakah pesan error email yang paling membantu user memperbaiki input?
Progres lesson naik setelah jawaban benar.
Kesalahan umum
WajibJangan memvalidasi setiap ketikan tanpa pertimbangan
Error saat user baru menulis satu huruf email sering lebih mengganggu daripada membantu. Untuk banyak field, tampilkan error setelah blur atau sesudah submit pertama. Pengecualian dapat berlaku untuk feedback yang sangat jelas dan tidak menghukum, misalnya indikator kekuatan password. Uji timing dengan task form yang nyata, bukan hanya happy path.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Inline error diletakkan dekat field yang perlu diperbaiki.
- Pesan error menjelaskan masalah dan langkah perbaikan dengan bahasa manusia.
- aria-invalid dan aria-describedby membuat hubungan input serta pesan dapat dikenali teknologi bantu.
- Timing error perlu membantu, bukan mempermalukan atau mengganggu user.
- Berikutnya, error summary membantu user melihat masalah form secara keseluruhan setelah submit gagal.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Error harus membantu user kembali ke jalur yang benar.