Data publikacji: 8 listopada 2023 r.
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 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ą, zapoznaj się z tym demonstracyjnym filmem:
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łoby 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.