Pseudo class :user-valid dan :user-invalid

:user-valid

Dukungan Browser

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 88.
  • Safari: 16.5.

Sumber

:user-invalid

Dukungan Browser

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 88.
  • Safari: 16.5.

Sumber

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 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 yang tidak valid.

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

Gunakan class pseudo ini untuk menata gaya kontrol input, pilih, 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 perbandingan. Setiap screenshot menampilkan formulir web dengan kontrol input, pilih, dan textarea yang sama. Screenshot pertama menunjukkan formulir dalam status awalnya sebelum input pengguna. Batas kontrol berwarna abu-abu dan teks bantuan di bawah menjelaskan bahwa setiap kontrol saat ini akan cocok dengan pemilih pseudo-class :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 pseudo-class :valid dan :user-valid. Screenshot ketiga dan terakhir menunjukkan formulir yang sama setelah pengguna menghapus semua inputnya. Batas kontrol berwarna merah dan teks bantuan di bawah menjelaskan bahwa setiap kontrol saat ini akan cocok dengan pemilih pseudo-class :invalid dan :user-invalid.

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 pseudoclass ini, untuk mencapai pengalaman pengguna yang diaktifkan oleh :user-valid dan :user-invalid, Anda harus menulis kode stateful tambahan. Kode tersebut diperlukan untuk melacak nilai awal, status fokus input saat ini, tingkat perubahan pengguna pada nilai, menjalankan pemeriksaan validitas tambahan, dan terakhir menambahkan class untuk dipilih sebagai gaya visual. Sekarang Anda dapat mengandalkan browser untuk menangani semua hal ini secara otomatis.

Referensi lainnya

Foto sampul oleh Behzad Ghaffarian di Unsplash.