Pseudo class :user-valid dan :user-invalid

:user-valid

Dukungan Browser

  • 119
  • 119
  • 88
  • 16,5

Sumber

:user-invalid

Dukungan Browser

  • 119
  • 119
  • 88
  • 16,5

Sumber

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>

Gambar yang menggabungkan 3 screenshot secara berdampingan untuk dibandingkan. Setiap screenshot menampilkan formulir web dengan kontrol input, select, dan textarea yang sama. Screenshot pertama menampilkan formulir dalam status awal sebelum input pengguna. Batas kontrol berwarna abu-abu dan teks bantuan di bawah ini menjelaskan bahwa setiap kontrol saat ini akan cocok dengan pemilih kelas semu :invalid. Screenshot kedua menampilkan formulir yang sama setelah pengguna memberikan input untuk setiap kontrol. Batas kontrol berwarna hijau dan teks bantuan di bawah menjelaskan bahwa setiap kontrol saat ini akan cocok dengan pemilih kelas semu :valid dan :user-valid. Screenshot ketiga dan terakhir menampilkan formulir yang sama setelah pengguna menghapus semua input mereka. Batas kontrol berwarna merah dan teks bantuan di bawah ini menjelaskan bahwa setiap kontrol saat ini akan cocok dengan pemilih kelas semu :invalid dan :user-invalid.

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

Foto sampul oleh Behzad Ghaffarian di Unsplash.