:user-valid:user-invalidDane wejściowe użytkowników to jedno z najważniejszych kwestii w każdym interfejsie. Aplikacja musi ułatwiać użytkownikom zauważenie, zrozumienie i naprawienie błędów we danych wejściowych. Pseudoklasy :user-valid i :user-invalid pomagają usprawnić weryfikację danych wejściowych, ponieważ informują o błędach dopiero wtedy, gdy użytkownik zmieni dane wejściowe. Dzięki tym nowym selektorom nie trzeba już pisać kodu stanowego, aby śledzić dane wejściowe zmienione przez użytkownika.
Selektory pseudoklas interakcji z użytkownikiem
Selektory pseudoklas :user-valid i :user-invalid są podobne do istniejących pseudoklas :valid i :invalid. Obie wartości pasują do ustawienia formularza na podstawie tego, czy jego bieżąca wartość spełnia ograniczenia weryfikacji. Zaletą nowych pseudoklas (:user-valid i :user-invalid) jest to, że pasują do opcji formularza dopiero po znacznej interakcji użytkownika z danymi wejściowymi.
Element sterujący formularza, który jest wymagany i pusty, będzie pasował do elementu :invalid, nawet jeśli użytkownik nie rozpoczął interakcji ze stroną. Jednak to ustawienie formularza nie będzie pasować do elementu :user-invalid, dopóki użytkownik nie zmieni danych wejściowych i nie pozostawi ich w nieprawidłowym stanie.
Używaj pseudoklas :user-valid i :user-invalid
Użyj tych pseudoklas, aby określić styl elementów sterujących danymi wejściowymi, zaznaczaniem i obszarem tekstowym, 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żytkowników i ograniczeń weryfikacji. Skorzystaj z poniższej wersji demonstracyjnej, aby zobaczyć, jak działają:
Większa wygoda użytkowników, mniej kodu
Bez tych pseudoklasy osiągnięcie wygody użytkowników zapewnianej przez funkcje :user-valid i :user-invalid wymagało napisania dodatkowego kodu stanowego. Kod ten potrzebował do śledzenia wartości początkowej, bieżącego stanu skupienia danych wejściowych, zakresu zmian wprowadzonych przez użytkownika, przeprowadzenia dodatkowej kontroli poprawności, a na koniec dodania klasy do wyboru stylu. Teraz możesz korzystać z przeglądarki,
aby automatycznie obsłużyć wszystkie te czynności.
Więcej materiałów
- :user-valid - Dokumentacja internetowa MDN
- :user-invalid - MDN Web Dokumentacja
- Pseudozajęcia związane z interakcjami z użytkownikami – wersja robocza redakcji W3C
- Weryfikacja ograniczeń formularza – dokumentacja internetowa MDN
- Samouczek ułatwień dostępu w Formularzach – Web Accessibility Initiative
Zdjęcie na okładkę: Behzad Ghaffarian w filmie Unsplash.