Lompat ke konten utama

Kompetisi Ajak Teman: hadiah total Rp1.000.000 tunai untuk 3 pengajak terbanyak. Berakhir 29 November 2026. Ikut kompetisi

←

Dasar Desain Antarmuka

Pelajaran 10 dari 12

Formulir dan layar sentuh

Validasi: kapan memeriksa dan bagaimana menandai galat

Setelah pelajaran ini kamu bisa menerapkan pola validasi GOV.UK (memeriksa saat kirim, mempertahankan jawaban, menandai judul halaman) dan memakai :user-invalid untuk gaya galat setelah interaksi.

±14 menitDiperiksa 3 Okt 2026

Materi

Validasi menolak informasi yang tidak mungkin benar, terlalu ambigu untuk dipakai, atau kosong padahal wajib. GOV.UK menambahkan dua cara mengurangi galat sejak awal: pertanyaan dirancang dengan baik, dan format yang berbeda tetap diterima selama tidak ambigu. Spasi, tanda hubung, atau titik yang terbawa saat menyalin nomor diabaikan, bukan dijadikan galat yang sulit dilihat.

Soal kapan memeriksa, GOV.UK tegas: jangan memvalidasi saat pengguna meninggalkan sebuah kolom; tunggu sampai ia menekan tombol lanjut atau kirim. Memeriksa sebelum pengguna selesai mengetik menyulitkan orang yang mengetik lambat. USWDS menulis "wait to validate": pesan dan gaya galat baru tampil setelah pengguna berinteraksi dengan kolom itu. Kedua sistem sepakat bahwa validasi di server selalu dibutuhkan, karena validasi di peramban bisa dilewati atau gagal dimuat.

Bila jawaban gagal, GOV.UK menampilkan ulang halamannya dengan isian seperti yang diketik pengguna, menambahkan kata ‘Error: ’ di awal title (di kelas ini diterjemahkan menjadi "Galat: ") supaya pembaca layar segera mengumumkannya, menampilkan ringkasan galat di atas halaman, dan pesan galat di samping kolomnya. USWDS juga meminta pemberitahuan galat di title. WCAG 3.3.1 Error Identification (tingkat A) mensyaratkan butir yang salah ditandai dan galatnya dijelaskan dalam teks; warna atau garis tepi saja tidak cukup.

Dua sistem ini berbeda soal validasi bawaan peramban. GOV.UK mematikannya dengan atribut novalidate pada form dan tidak memasang required, karena gaya dan letak pesan bawaan peramban tidak bisa diseragamkan. USWDS justru meminta atribut required pada kolom wajib. Bila validasi bawaan dipakai, MDN menjelaskan :user-invalid: cocok dengan kolom yang tidak sah hanya setelah pengguna berinteraksi dengannya, sedangkan :invalid sudah cocok sejak halaman dibuka.

.isian-surel:user-invalid { border: 4px solid #b50909; }

Latihan

0/3 lulus

Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 3 dari 3

Kapan pola Recover from validation errors GOV.UK meminta jawaban pengguna diperiksa?

Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke