Валидация форм в html5

Модуль пользовательского интерфейса имеет несколько псевдо классов, которые помогают проводить валидацию полей формы:

• valid
• invalid
• required
• optional
• in-range
• out-of-range
• read-only
• read-write

Для необходимых псевдо классов создаем css:

input:focus:required:invalid {
  background: pink url(ico_validation.png) 379px 3px no-repeat;
}
input:required:valid {
  background-color: #fff;
  background-position: 379px -61px;
}

По умолчанию обозначаем выбранное поле формы недействительным.
In-range и out-of-range псевдо классы должны использоваться в сочетании с min и max атрибутами.

Дополнительные типы и атрибуты
В HTML5 формам добавили несколько новых типов ввода, таких как url, number и email. Они передают параметр valid когда пользователь вводит правильный email и так далее. Тип url немного по разному обрабатывается в разных браузерах. В опере достаточно набрать “http://”, как поле помечается действительным, а в хроме оно станет валидным после “http://g”.

Есть также еще несколько атрибутов, которые помогают валидации, такие как placeholder, required, maxlength, pattern, min, max, и step:

Ограничиваем количество чисел до 7 с помощью maxlength, и задаем диапозон с помощью min и max. Если не задавать иное значение step, то по умолчанию он равен 1.

Чтобы вызвать invalid псевдо класс на более конкретные условия, к примеру при валидации номера телефона, мы можем использовать pattern атрибут, который позволяет применять регулярные выражения для поля формы:

И более сложная вариация, поле для ввода пароля: