Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

:user-valid и :user-invalid: стили полей до submit

Нативная валидация без красной рамки на каждом keyup — только после взаимодействия.

Изображение статьи: :user-valid и :user-invalid: стили полей до submit

Псевдоклассы :user-valid и :user-invalid срабатывают, когда пользователь изменил поле и оно проходит или не проходит constraint validation — мягче, чем :invalid с первого рендера.

Сочетаются с required, pattern, type="email" и сообщениями из setCustomValidity.

- [:user-invalid — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid) — Условия срабатывания.

- [:user-valid — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid) — Парный псевдокласс.

- [Client-side form validation — MDN](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) — Constraint validation API.

---

## Доступность

Не полагайтесь только на цвет — добавьте aria-invalid и текст ошибки, связанный через aria-describedby.

#CSS#формы#UX

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.