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

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

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

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

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

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