Browser memvalidasi form secara bawaan: atribut required, type="email", dan minlength membuat pemeriksaan berjalan sebelum data dikirim. CSS dapat membaca hasil pemeriksaan itu lewat pseudo-class :required , :valid , dan :invalid , sehingga isian yang bermasalah dapat ditandai tanpa skrip. Namun ada jebakan besar: pemeriksaan berjalan sejak halaman dimuat, sehingga :invalid aktif sebelum pengguna sempat mengisi apa pun. Pada Chapter ini kita memasang ketiga pseudo-class tersebut, membedah jebakannya, lalu memperbaikinya dengan :user-valid dan :user-invalid.

Tiga Pseudo-class Validasi #

:required cocok dengan setiap kontrol yang membawa atribut required, dan keadaan itu melekat sejak awal. :valid dan :invalid ditentukan oleh hasil pemeriksaan browser: email harus berformat benar, isian wajib tidak boleh kosong. Ketiganya bekerja pada input, select, dan textarea — kapan pun aturan validasi HTML berlaku. Yang perlu digarisbawahi: pemeriksaan berjalan tanpa menunggu interaksi, sehingga input wajib yang masih kosong berstatus :invalid bahkan sebelum pengguna menyentuhnya. Gaya berikut memakai ketiganya:

css 
.isian {
  width: 280px;
  padding: 10px 12px;
  border: 1px solid rgb(148, 163, 184);
  border-radius: 8px;
  font: inherit;
}

.isian:required {
  background-color: rgb(255, 247, 237);
}

.isian:invalid {
  border-color: rgb(220, 38, 38);
}

.isian[type="email"]:valid {
  border-color: rgb(22, 163, 74);
}
  1. Baris 1–7 (.isian): gaya dasar dengan border abu yang dipakai seluruh isian.
  2. Baris 9–11 (:required): isian wajib diberi latar krem pucat — penanda yang bersifat informatif, bukan teguran.
  3. Baris 13–15 (:invalid): isian yang gagal pemeriksaan — termasuk isian wajib yang masih kosong — berborder merah.
  4. Baris 17–19 ([type="email"]:valid): isian email yang sah berborder hijau. Gaya ini dibatasi pada type="email" karena :valid juga cocok dengan isian kosong yang tidak wajib; tanpa pembatasan, seluruh isian opsional ikut berborder hijau sejak dimuat. Pelengkapnya adalah :optional , kebalikan :required, bila isian opsional perlu diberi gaya berbeda tanpa menulis negasi manual.

Hasil di Browser:

text 
Isian wajib yang kosong tampil dengan border rgb(220, 38, 38) dan latar krem
rgb(255, 247, 237) — :required dan :invalid aktif sejak dimuat.
Isian opsional kosong tetap berborder abu rgb(148, 163, 184).
Isian email berisi "[email protected]" berborder hijau rgb(22, 163, 74).

Jebakan :invalid pada Halaman yang Baru Dimuat #

Halaman yang baru dibuka langsung memperlihatkan border merah pada seluruh isian wajib yang masih kosong. Form yang panjang tampak penuh tanda masalah padahal pengguna belum berbuat salah apa-apa; warna merah pun kehilangan maknanya karena muncul di mana-mana sejak awal. Prinsip yang sehat: biarkan keadaan awal tenang, dan simpan gaya tegas untuk keadaan yang benar-benar perlu ditindaklanjuti.

:user-valid dan :user-invalid #

Pseudo-class :user-invalid dan :user-valid memperbaiki pengalaman tersebut: keduanya hanya cocok setelah pengguna berinteraksi dengan isian — mengetik, lalu meninggalkannya (blur). Halaman yang baru dimuat tetap tenang, dan tanda galat baru muncul untuk isian yang telah disentuh namun berakhir salah. Fitur ini merupakan Baseline sejak 2024 dan dapat dipakai di seluruh browser utama.

css 
.isian:user-invalid {
  border-color: rgb(220, 38, 38);
}

.isian:user-valid {
  border-color: rgb(22, 163, 74);
}

Pada browser tanpa dukungan :user-invalid, pola klasik tetap berguna: gerbang :placeholder-shown. Isian yang sedang menampilkan placeholder berarti masih kosong dan belum disentuh, sehingga input:not(:placeholder-shown):invalid hanya menyala setelah pengguna mulai mengetik. Pola ini menuntut atribut placeholder pada setiap isian — dan itulah alasan :user-invalid, yang bekerja tanpa syarat tambahan, menjadi pilihan utama saat ini.

Uji manual di demo:

  1. Buka demo — isian wajib yang kosong berborder merah sejak awal (perilaku :invalid), sedangkan aturan :user-invalid masih diam pada semua isian.
  2. Hapus isi surel hingga kosong, lalu pindahkan fokus — kini border merah menyala lewat :user-invalid: isian telah disentuh dan berakhir salah.
  3. Ketik [email protected] dan pindahkan fokus — border berubah hijau lewat :user-valid.

Demo chapter ini (required-invalid.html) membawa tiga isian dengan empat pemeriksaan data-expected pada properti border-color dan background-color.