`:user-valid și :user-invalid (validarea formularelor)` în CSS

Selectori și reguli de bază Chrome 119, Firefox 88, Safari 16.5

Marchează câmpurile valide sau invalide abia după ce utilizatorul a interacționat cu ele, nu imediat la încărcarea paginii.

Sintaxă CSS

input:user-invalid {
  border-color: #dc2626;
}
input:user-valid {
  border-color: #16a34a;
}
input:placeholder-shown { ... }
input:required { ... }

Ce face `:user-valid și :user-invalid (validarea formularelor)`

Pseudo-clasele vechi :valid și :invalid se aplică imediat ce pagina se încarcă. Un câmp obligatoriu gol este deja „invalid”, așa că formularul apare plin de borduri roșii înainte ca utilizatorul să fi scris ceva.

:user-invalid și :user-valid folosesc aceleași reguli de validare HTML (required, type="email", minlength, pattern), dar se aplică doar după ce utilizatorul a modificat câmpul și l-a părăsit sau după ce a încercat să trimită formularul.

Pseudo-clase înrudite utile: :required și :optional (câmpuri obligatorii sau nu), :placeholder-shown (câmpul este gol și afișează textul de sugestie).

Valori uzuale

Valoare	Descriere
`:user-invalid`	Câmpul este invalid și utilizatorul a interacționat deja cu el.
`:user-valid`	Câmpul este valid și utilizatorul a interacționat deja cu el.
`:invalid / :valid`	Starea de validare, aplicată imediat, inclusiv la încărcarea paginii.
`:required / :optional`	Câmpul are sau nu are atributul required.
`:placeholder-shown`	Câmpul este gol și afișează placeholder-ul.

Exemple

Exemplul 1: Formular de înscriere fără erori premature

Bordura roșie și mesajul apar doar după ce utilizatorul a scris o adresă greșită și a trecut la alt câmp.

/* <input type="email" required> <span class="eroare">...</span> */
input {
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px;
}

input:user-invalid {
  border-color: #dc2626;
}

input:user-valid {
  border-color: #16a34a;
}

.eroare {
  display: none;
  color: #dc2626;
}

input:user-invalid + .eroare {
  display: block;
}

Efect vizual în browser

La deschiderea paginii câmpul Email are bordură gri. Ana scrie „ana.popescu” și trece la câmpul următor: bordura devine roșie și apare mesajul „Introdu o adresă de email validă”. După ce corectează în „ana.popescu@gmail.com”, bordura devine verde și mesajul dispare.

Exemplul 2: Etichetă care se micșorează când câmpul nu mai este gol

:placeholder-shown permite un efect de etichetă flotantă fără JavaScript (câmpul are placeholder=” „).

.camp {
  position: relative;
}

.camp label {
  position: absolute;
  left: 10px;
  top: 10px;
  color: #64748b;
  transition: all 0.15s;
}

.camp input:not(:placeholder-shown) + label,
.camp input:focus + label {
  top: -10px;
  font-size: 0.75rem;
  background: #ffffff;
  padding: 0 4px;
}