:user-valid
:user-invalid
Input pengguna adalah salah satu permasalahan paling sensitif dalam antarmuka pengguna mana pun. Aplikasi yang dapat digunakan
harus membantu pengguna melihat, memahami, dan memperbaiki kesalahan dalam
input mereka. Pemilih class pseudo :user-valid
dan :user-invalid
membantu meningkatkan
pengalaman pengguna validasi input dengan memberikan masukan tentang kesalahan hanya
setelah pengguna mengubah input. Dengan pemilih baru ini, tidak perlu lagi
menulis kode stateful untuk melacak input yang telah diubah pengguna.
Pemilih class semu interaksi pengguna
Pemilih class pseudo :user-valid
dan :user-invalid
mirip dengan
class pseudo :valid
dan :invalid
yang sudah ada. Keduanya cocok dengan kontrol formulir berdasarkan
apakah nilai saat ini memenuhi batasan validasinya. Namun, keuntungan dari class pseudo :user-valid
dan :user-invalid
yang baru adalah
class tersebut cocok dengan kontrol formulir hanya setelah pengguna berinteraksi dengan
input secara signifikan.
Kontrol formulir yang wajib dan kosong akan cocok dengan :invalid
meskipun pengguna
belum mulai berinteraksi dengan halaman. Namun, kontrol formulir yang sama tidak akan
cocok dengan :user-invalid
hingga pengguna mengubah input dan membiarkannya dalam
status tidak valid.
Gunakan pseudo-class :user-valid
dan :user-invalid
Gunakan class pseudo ini untuk menata gaya kontrol input, select, dan textarea, seperti yang ditunjukkan dalam contoh berikut:
input:user-valid,
select:user-valid,
textarea:user-valid {
border-color: green;
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
border-color: red;
}
<input required="required" />
<select required="required">
<option value="">Choose an option</option>
<option value="1">One</option>
</select>
<textarea required="required"></textarea>
Pemilih mencocokkan berdasarkan kombinasi interaksi pengguna dan batasan validasi. Berinteraksilah dengan demo berikut untuk melihat cara kerjanya:
Pengalaman pengguna yang lebih baik dengan lebih sedikit kode
Tanpa pseudo-class ini, mencapai pengalaman pengguna yang diaktifkan oleh
:user-valid
dan :user-invalid
memerlukan penulisan kode stateful tambahan. Kode
tersebut yang diperlukan untuk melacak nilai awal, status fokus input saat ini, tingkat perubahan nilai oleh pengguna, menjalankan pemeriksaan validitas tambahan, dan terakhir menambahkan class untuk memilih gaya. Anda sekarang dapat mengandalkan browser untuk menangani semua ini secara otomatis.
Referensi lainnya
- :valid-pengguna - Dokumen web MDN
- :pengguna-tidak valid - Dokumen web MDN
- Class Pseudo interaksi pengguna - Draf Editor W3C
- Validasi Batasan Formulir - Dokumen web MDN
- Tutorial Aksesibilitas Formulir - Inisiatif Aksesibilitas Web
Foto sampul oleh Behzad Ghaffarian di Unsplash.