FluentStack

Uji Kompetensi Validation UX

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 12: Forms, Validation, and Data FetchingAdvanced75 menitBahasa Indonesia

Uji Kompetensi Validation UX

Checkpoint untuk menilai kesiapan merancang feedback validasi form yang jelas, aksesibel, dan dapat dipulihkan.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Mengevaluasi inline error, summary, focus, pending, dan success state sebagai satu flow
  • Membedakan invalid field dari submit failure
  • Menyusun struktur form yang membantu user pulih dari kesalahan
  • Menentukan langkah QA aksesibilitas pada form lokal
Validation UXAccessibilityReact Hook FormReadiness Checkpoint

Isi lesson

6 blok
  1. 1.
    Checkpoint: user harus tahu apa yang salah, di mana, dan apa yang terjadi berikutnyaBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Baca guidance form accessibility sebelum memoles project lokalBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: user harus tahu apa yang salah, di mana, dan apa yang terjadi berikutnya

Wajib

Form yang siap dipakai tidak berhenti pada schema yang valid. Saat ada masalah, user perlu menemukan field yang salah, memahami perbaikannya, dan dapat kembali mengirim form. Saat request berjalan, mereka perlu tahu bahwa submit sedang diproses. Saat berhasil atau gagal, hasilnya perlu dibedakan dengan jelas.

Di checkpoint ini, nilai struktur feedback sebagai satu alur: inline error untuk konteks field, summary untuk gambaran form, focus untuk menemukan feedback, pending untuk mencegah duplicate submit, dan success atau submit error untuk hasil akhir. Tidak ada satu atribut ARIA yang menyelesaikan semuanya; kualitas ada pada hubungan copy, semantic HTML, state, dan pengujian nyata.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Validation UX

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 5

Target lulus: 70

Mengapa inline error tetap dibutuhkan meskipun form sudah memiliki error summary?

Coding practice

WajibDibuka di workspace khusus

Build accessible profile validation checkpoint

Lengkapi checkpoint profile yang menyatukan error summary, fokus invalid, pending submit, dan success feedback. Preview tidak menjalankan form runtime.

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.

6 cek otomatis5 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis implementation note singkat untuk rekan satu tim tentang form profile yang akan kamu perbaiki. Jelaskan: kapan inline error muncul; apa isi error summary; ke mana fokus dipindahkan setelah submit gagal; kapan button di-disable; bagaimana success dan submit failure dibedakan; serta dua hal yang harus diuji dengan keyboard atau screen reader di local app. Gunakan keputusan yang spesifik, bukan daftar atribut ARIA.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/500 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Baca guidance form accessibility sebelum memoles project lokal

Gunakan dokumentasi resmi untuk memeriksa keputusan yang sudah kamu buat. Jangan salin seluruh pattern; pilih bagian yang menjawab masalah form-mu saat ini.

W3C WAI

Forms Tutorial: User Notifications

Fokus baca

  • Perbedaan feedback keseluruhan dan inline feedback.
  • Cara menulis error summary yang dapat menuju field terkait.
  • Hubungan aria-describedby dengan pesan error.

Abaikan dulu

  • alertdialog untuk flow yang sangat khusus.
  • Multi-page form orchestration.
Buka dokumentasi

W3C WAI

Forms Tutorial: Validating Input

Fokus baca

  • Label, required input, dan error identification.
  • Kapan custom validation perlu memberi notifikasi aksesibel.
  • Cara memikirkan perbaikan error, bukan hanya penolakan submit.

Abaikan dulu

  • Flow transaksi legal atau finansial yang membutuhkan confirmation khusus.
  • Custom control yang belum dipakai project-mu.
Buka dokumentasi

Aksi setelah membaca

Di Local React App atau Local Next.js App, pilih satu form nyata. Kirim data kosong atau salah, navigasikan hanya dengan keyboard, lalu catat satu perbaikan pada copy, focus, atau state yang kamu temukan. Jangan tandai selesai hanya dari struktur practice workspace.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Inline error memberi konteks langsung di field, summary memberi gambaran form-level.
  • Focus setelah submit gagal membantu user menemukan feedback yang berubah.
  • Pending mencegah duplicate submit tanpa menggantikan validation atau mengunci recovery.
  • Success, validation error, dan submit failure adalah state dengan pesan serta tindakan berbeda.
  • Kamu siap melanjutkan ke Server-State Thinking untuk menangani loading, error, empty, dan success state dari data yang berasal dari server.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: user harus tahu apa yang salah, di mana, dan apa yang terjadi berikutnya.

Memuat progresReview module