Pseudoklasy :user-valid i :user-invalid

Dane wprowadzane przez użytkownika to jeden z najbardziej wrażliwych elementów każdego interfejsu. Aplikacja musi pomagać użytkownikom w widzeniu, rozumieniu i poprawianiu błędów w danych wejściowych. Selektory pseudoklas :user-valid i :user-invalid ułatwiają użytkownikom weryfikację danych wejściowych, ponieważ podają informacje o błędach dopiero po zmianie danych przez użytkownika. Dzięki nowym selektorom nie musisz już pisać kodu stanowego, aby śledzić zmiany wprowadzone przez użytkownika.

Selektory pseudoklas interakcji użytkownika

Selektory pseudoklas :user-valid i :user-invalid są podobne do istniejących pseudoklas :valid i :invalid. Oba te elementy pasują do elementu formularza na podstawie tego, czy jego bieżąca wartość spełnia ograniczenia walidacji. Jednak nowe pseudoklasy :user-valid i :user-invalid mają tę zaletę, że pasują do elementu formularza dopiero po znaczącej interakcji użytkownika z polem wejściowym.

Element formularza, który jest wymagany i pusty, będzie pasować do :invalid, nawet jeśli użytkownik nie rozpoczął interakcji ze stroną. Jednak ten sam element formularza nie będzie pasował do wartości :user-invalid, dopóki użytkownik nie zmieni danych wejściowych i nie pozostawi ich w nieprawidłowym stanie.

Używanie pseudoklas :user-valid i :user-invalid

Użyj tych pseudoklas do nadawania stylu elementom input, select i textarea, jak pokazano w tych przykładach:

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>

Selektory dopasowują się na podstawie kombinacji interakcji użytkownika i ograniczeń walidacji. Aby zobaczyć, jak działają te funkcje, zapoznaj się z poniżej prezentacją:

Większa wygoda użytkowników dzięki mniejszej ilości kodu

Bez tych pseudoklas osiągnięcie wygody użytkowników zapewnianej przez klasy :user-valid i :user-invalid wymagało napisania dodatkowego kodu stanowego. Ten kod jest potrzebny do śledzenia początkowej wartości, bieżącego stanu fokusa pola wejściowego, zakresu zmian wartości wprowadzonych przez użytkownika, dodatkowego sprawdzania poprawności i dodawania klasy do wyboru w celu stylizacji. Teraz możesz polegać na przeglądarce, która zajmie się wszystkim automatycznie.

Więcej zasobów

• :użytkownik-prawidłowy – dokumentacja MDN
• :user-invalid - MDN web docs
• Pseudoklasy interakcji z użytkownikiem – projekt W3C
• Sprawdzanie poprawności formularza – dokumentacja MDN
• Samouczek dotyczący ułatwień dostępu w Formularzach – inicjatywa ułatwień dostępu w internecie

Zdjęcie na okładce: Behzad Ghaffarian z Unsplash.