Pseudo class :user-valid dan :user-invalid

Input pengguna adalah salah satu masalah paling sensitif di antarmuka pengguna mana pun. Aplikasi yang dapat digunakan harus membantu pengguna melihat, memahami, dan memperbaiki kesalahan dalam input mereka. Pemilih pseudo-class :user-valid dan :user-invalid membantu meningkatkan pengalaman pengguna dalam validasi input dengan memberikan masukan tentang kesalahan hanya setelah pengguna mengubah input. Dengan pemilih baru ini, Anda tidak perlu lagi menulis kode stateful untuk melacak input yang telah diubah pengguna.

Pemilih pseudo-class interaksi pengguna

Pemilih pseudo-class :user-valid dan :user-invalid mirip dengan pseudo-class :valid dan :invalid yang ada. Keduanya cocok dengan kontrol formulir berdasarkan apakah nilai saat ini memenuhi batasan validasinya. Namun, keuntungan dari pseudo-class :user-valid dan :user-invalid baru adalah pseudo-class tersebut hanya cocok dengan kontrol formulir setelah pengguna berinteraksi secara signifikan dengan input.

Kontrol formulir yang wajib diisi dan kosong akan cocok dengan :invalid meskipun jika pengguna belum mulai berinteraksi dengan halaman. Namun, kontrol formulir yang sama tidak akan cocokkan :user-invalid sampai pengguna telah mengubah input dan membiarkannya dalam status tidak valid.

Menggunakan pseudo-class :user-valid dan :user-invalid

Gunakan kelas semu ini untuk menata gaya kontrol area teks, pemilihan, dan input, 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 cocok 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 kelas semu ini, pencapaian pengalaman pengguna yang dimungkinkan oleh :user-valid dan :user-invalid memerlukan penulisan kode stateful tambahan. Bahwa kode yang diperlukan untuk melacak nilai awal, status fokus saat ini dari tingkat perubahan pengguna terhadap nilai, menjalankan validitas tambahan diperiksa, dan terakhir menambahkan class untuk memilih penataan gaya. Sekarang Anda dapat mengandalkan browser untuk menangani semua hal ini secara otomatis.

Referensi lainnya

• :user-valid - MDN web docs
• :user-invalid - MDN web docs
• Pseudo-class Interaksi pengguna - Draf Editor W3C
• Validasi Batasan Formulir - Dokumen web MDN
• Tutorial Aksesibilitas Formulir - Inisiatif Aksesibilitas Web

Foto sampul oleh Behzad Ghaffarian di Unsplash.