Wzorzec 14

Walidacja bez JavaScript

Formularz potrafi zgłosić większość błędów, zanim powstanie pierwsza linia JavaScript. :user-invalid zapala się dopiero po opuszczeniu pola, :has pokazuje komunikat obok, a slot na tekst błędu i tak jest zarezerwowany, więc nic nie skacze.

FormPanel walidowany samym CSS

Kliknij w pole, zostaw je puste albo wpisz zły format i wyjdź. Podświetlenie i komunikat włącza :user-invalid z :has, w tym demo nie ma ani linii JavaScript.

Reguły

:user-invalid zamiast :invalid, żeby nie krzyczeć, zanim użytkownik skończy pisać.
Komunikat włącza reguła z :has na kontenerze pola, bez nasłuchiwania zdarzeń.
Slot komunikatu ma stałą wysokość, widoczność przełącza visibility, nie display.
JavaScript zostaje na walidację biznesową, nie na formaty i wymagalność.

Wzorzec w kodzie

Trzy reguły CSS zamiast obsługi zdarzeń

.field .error { visibility: hidden; }
.field:has(input:user-invalid) .error { visibility: visible; }
.field input:user-invalid { border-color: var(--color-danger-400); }

Slot na błąd zarezerwowany, widoczność przełącza visibility

<div className="field">
  <label htmlFor="email">Adres e-mail</label>
  <input id="email" type="email" required />
  <p className="error min-h-lh">
    Podaj poprawny adres z małpą.
  </p>
</div>