Индикаторы правильности заполнения полей формы на CSS

Недавно наткнулся на интересную технику, позволяющую проверять правильность заполнения полей прямо в CSS.

С приходом HTML5 валидация данных на стороне клиента превратилась в довольно простую задачу, которую приятно решать. Всё благодаря атрибутам required, pattern, maxlength (maxlength доступен и в HTML4), а также благодаря новым типам полей ввода (например, email, url).

Новые возможности появились не только в HTML. С помощью CSS можно стилизовать разные состояния поля ввода: поле с неправильно введёнными данными и поле с правильно введёнными данными. Происходит это с помощью псевдоклассов :valid и :invalid.

Сразу рабочий пример:

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

Поддержка браузерами — IE10+.

Share
Send
8 comments
Shilov Gennadiy

Если нужна нормальная почта, а не что-то типа “1@2”, то применять надо pattern с регуляркой

Andrew Gurylev

Нельзя показывать пользователю поле красным, пока он ещё не успел что-то ввести.
Но это тоже решается css
:focus:not(:empty):invalid
адовая агония.

Artiom Brezhnev

Согласен с Andrew Gurylev, однако такое решение тоже будет не совсем правильным.

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

Единственный минус такого подхода — наличие JS.

Михаил Андрейченко

Одно слово: доступность.

Ростислав

Зачем для каждого input создавать class=“form_input” и т.д.?

Андрей Романов

Стилизация по селектору вроде input[type=“text”] требует больше кода и несёт больше потенциальных проблем.

Ростислав

А так не логично получаеться input и class input, не так и много кода будет, и он будет более читаемым, а так получается масло масляное) а так классная реализация, спасибо тебе)

Андрей Романов

Что короче, написать один раз .form__input или input[type=“text”], input[type=“password”], input[type=“email”]? А когда полей будет больше? А когда нужно будет стилизовать их состояния? И не забывайте о том, что input — необязательно поле ввода. Он может быть кнопкой или чекбоксом. Короче, лучше стилизовать по классу.

Ростислав

Вы используете один класс для трех полей, их можно написать просто input и что будет короче?

Андрей Романов

Вы стилизуете поля ввода по селектору input, а потом обнаруживаете, что кнопка отправки формы стала выглядеть как поле ввода. Зачем такие проблемы?

Ростислав

Для такого случая пишем input[type=“button”] и не создаем доп класс;)
На заметку http://css-live.ru/articles/osmyslennyj-css-opisyvajte-stilyami-svoyu-logiku.html

Your comment
won’t be published

HTML will not work

Ctrl + Enter
Popular