Псевдоклассы :user-valid и :user-invalid,Псевдоклассы :user-valid и :user-invalid

:user-valid

Поддержка браузера

  • Хром: 119.
  • Край: 119.
  • Фаерфокс: 88.
  • Сафари: 16.5.

Источник

:user-invalid

Поддержка браузера

  • Хром: 119.
  • Край: 119.
  • Фаерфокс: 88.
  • Сафари: 16.5.

Источник

Пользовательский ввод — одна из наиболее чувствительных проблем в любом пользовательском интерфейсе. Удобное приложение должно помогать пользователям видеть, понимать и исправлять любые ошибки при вводе данных. Селекторы псевдоклассов :user-valid и :user-invalid помогают улучшить взаимодействие пользователя с проверкой ввода, предоставляя обратную связь об ошибках только после того, как пользователь изменил ввод. Благодаря этим новым селекторам больше нет необходимости писать код с сохранением состояния, чтобы отслеживать вводимые пользователем изменения.

Селекторы псевдоклассов взаимодействия с пользователем

Селекторы псевдоклассов :user-valid и :user-invalid аналогичны существующим псевдоклассам :valid и :invalid . Оба соответствуют элементу управления формой на основе того, удовлетворяет ли его текущее значение ограничениям проверки. Однако преимущество новых псевдоклассов :user-valid и :user-invalid заключается в том, что они соответствуют элементу управления формой только после того, как пользователь существенно взаимодействовал с вводом.

Обязательный и пустой элемент управления формы будет соответствовать :invalid даже если пользователь еще не начал взаимодействовать со страницей. Однако тот же элемент управления формой не будет соответствовать :user-invalid до тех пор, пока пользователь не изменит ввод и не оставит его в недопустимом состоянии.

Используйте псевдоклассы :user-valid и :user-invalid

Используйте эти псевдоклассы для стилизации элементов управления вводом, выбором и текстовой областью, как показано в следующих примерах: 

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>

Изображение, состоящее из трех скриншотов, расположенных рядом для сравнения. На каждом снимке экрана показана веб-форма с одинаковыми элементами управления вводом, выбором и текстовой областью. На первом снимке экрана показана форма в исходном состоянии до ввода данных пользователем. Границы элемента управления выделены серым цветом, а текст справки ниже поясняет, что каждый элемент управления в настоящее время соответствует селектору псевдокласса :invalid. На втором снимке экрана показана та же форма после того, как пользователь ввел данные для каждого элемента управления. Границы элемента управления выделены зеленым цветом, а текст справки ниже поясняет, что каждый элемент управления в настоящее время соответствует селекторам псевдоклассов :valid и :user-valid. Третий и последний снимок экрана показывает ту же форму после того, как пользователь удалил все введенные данные. Границы элемента управления выделены красным, а текст справки ниже поясняет, что каждый элемент управления в настоящее время соответствует селекторам псевдоклассов :invalid и :user-invalid.

Селекторы сопоставляются на основе сочетания действий пользователя и ограничений проверки. Воспользуйтесь следующей демонстрацией, чтобы увидеть их в действии:

Лучший пользовательский опыт с меньшим количеством кода

Без этих псевдоклассов для достижения пользовательского опыта, обеспечиваемого :user-valid и :user-invalid требовалось написание дополнительного кода с сохранением состояния. Этот код должен был отслеживать начальное значение, текущее состояние фокуса ввода, степень изменений значения пользователем, запускать дополнительную проверку достоверности и, наконец, добавлять класс для выбора стиля. Теперь вы можете положиться на то, что браузер справится со всем этим автоматически.

Больше ресурсов

Фото на обложке: Бехзад Гаффарян на Unsplash .