Использование валидации через псевдоклассы CSS4 для улучшения UX

На этой неделе вышло множество статей, касающихся селекторов, которые могут быть включены в спецификацию CSS4.

Одной из таких статей была статья Льюиса Лазариса (Louis Lazaris), в которой он хорошо рассказал о новых селекторах, которые могут быть доступны и как мы можем их использовать.

Селекторы, которые я для себя выделил, были селекторы вылидации через псевдо-классы. Они дадут нам возможность менять вид элемента в зависимости от того валиден он или нет.

Вы спросите почему это интересно?

Конечно, что это не решение валидации формы (вам все равно придется делать проверку на стороне сервера).

Но это возможность помочь пользователям увидеть, что они забыли добавить данные или проверить верны ли введенные ими значения перед нажатием кнопки отправить.

Посмотрите пример ниже.

Поле будет невалидным пока вы не укажете корректный адрес электронной почты.

See the Pen Using Level 4 CSS Validity Pseudo-Classes to Improve Form UX. by Michael (@mjtweaver) on CodePen.

Как использовать

<input type="text" placeholder="name" required>

Атрибут required помогает пользователям увидеть, что элемент не должен быть пустым, но используя новые псевдо-селекторы мы можем улучшить UX.

/* Будет отображаться до тех пор, пока в поле не будет значения */
input[ type=text ]:invalid {
  border-color: red;
}
/* Срабатывает, как только значение появилось */
input[ type=text ]:valid {
  border-color: green;
}

Как только в поле появилось значение, цвет рамки изменился на зёленый.

При использовании поля ввода электронной почты, пользователь должен добавить значение и как только этим значением будет адрес электронной почты, оно станет валидным.

<input type="email" placeholder="email address" required>

Насколько широко это поддерживается?

Это поддерживается в последних версиях IE, Firefox и Chrome, а Safari обеспечивает лишь частичную поддержку. Для дополнительной информации смотреть CanIUse.com.