Pseudoklasy :user-valid i :user-invalid

Dane wprowadzane przez użytkownika to jeden z najbardziej wrażliwych elementów każdego interfejsu. Użyteczność aplikacji musi pomagać użytkownikom w dane wejściowe. Selektory pseudoklasy :user-valid i :user-invalid pomagają w ulepszaniu wrażenia użytkowników dotyczące weryfikacji danych wejściowych, podając tylko informacje o błędach; gdy użytkownik zmieni dane wejściowe. Dzięki tym nowym selektorom nie zobaczysz już, na napisanie kodu stanowego w celu śledzenia zmian wprowadzonych 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 pasują do elementu formularza na podstawie tego, czy jego bieżąca wartość spełnia ograniczenia walidacji. Jednak Zaletą nowych pseudoklas :user-valid i :user-invalid jest to, pasują do elementu sterującego formularza tylko wtedy, gdy użytkownik wszedł w interakcję z dane wejściowe.

Wymagany i pusty element sterujący formularza pasuje do wyrażenia :invalid nawet wtedy, gdy użytkownik nie zaczął 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żyj pseudoklasy :user-valid i :user-invalid

Użyj tych pseudoklas, aby dostosować styl elementów sterujących do wprowadzania danych, zaznaczania i zaznaczania pól tekstowych, tak jak pokazano to w przykładzie. 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 przez Przeglądarki :user-valid i :user-invalid wymagały 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 dodania klasy do wybrania do stylizacji. Teraz możesz polegać na przeglądarce, która zrobi to automatycznie.

Więcej zasobów

• :user-valid – dokument internetowy MDN
• :user-invalid - MDN web docs
• Pseudoklasy interakcji użytkownika – wersja robocza edytora W3C
• Sprawdzanie poprawności formularza – dokumentacja MDN
• Samouczek ułatwień dostępu w Formularzach – inicjatywa Web Accessibility Initiative

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