Pseudoklasy :user-valid i :user-invalid

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>

Obraz, który obok siebie prezentuje 3 zrzuty ekranu do porównania. Każdy zrzut ekranu przedstawia formularz internetowy z tymi samymi elementami sterującymi: polami tekstowymi, polami wyboru i polami tekstowymi. Pierwszy zrzut ekranu przedstawia formularz w pierwotnym stanie, zanim użytkownik wprowadzi jakiekolwiek dane. Ramki elementów są szare, a tekst pomocy poniżej informuje, że każdy element będzie obecnie pasował do selektora pseudoklasy :invalid. Drugi zrzut ekranu przedstawia to samo pole po wprowadzeniu przez użytkownika danych w każdym elemencie sterującym. Ramki elementów sterujących są zielone, a tekst pomocy poniżej informuje, że każdy element sterujący jest obecnie zgodny z pseudoselektorami pseudoklasy :valid i :user-valid. Trzeci i ostatni zrzut ekranu pokazuje ten sam formularz po usunięciu przez użytkownika wszystkich danych. Ramki elementów sterujących są czerwone, a tekst pomocy poniżej informuje, że każdy element sterujący będzie obecnie pasował do pseudoselektorów klas :invalid i :user-invalid.

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

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