Вопросы к Поиску с Алисой
Псевдокласс :user-invalid в CSS отличается от :invalid тем, что применяется к полям формы после их заполнения и потери фокуса. webref.ru
:invalid применяется к полям формы сразу же, таким образом, ещё незаполненное поле будет считаться невалидным. webref.ru :user-invalid решает проблему, когда недействительные поля формы помечаются как :invalid ещё до взаимодействия с пользователем, что может сбить его с толку. hcdev.ru Псевдокласс :user-invalid применяется только после взаимодействия с пользователем, когда элемент теряет фокус. developer.mozilla.org
Таким образом, основное отличие в том, что :invalid применяется сразу к незаполненным полям формы, а :user-invalid — только после заполнения и потери фокуса. webref.ru