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

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

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

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

:user-invalid — MDN — Условия срабатывания.
:user-valid — MDN — Парный псевдокласс.
Client-side form validation — MDN — Constraint validation API.

Доступность

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