Валидация полей ввода с помощью css3 & html5

Главная // html & css // Валидация полей ввода с помощью css3 & html5

Валидация полей ввода с помощью css3 & html5

Множество ресурсов в сети имеют формы для регистрации, оформления заказа в интернет магазине, обратной связи и многие другие, не суть важно. Зачастую нам нужно контролировать ввод данных в нашу форму, делать это можно несколькими способами: на стороне сервера и на стороне клиента. Я делал это плагином к WordPress или с помощью jQuery. Если возможно, желательно делать валидацию форм без перезагрузки страницы, по мере ввода данных в поле формы. Это вызовет меньше негатива у ваших посетителей. Сегодня мы это реализуем с помощью HTML5 и CSS3.

Посмотреть результат можно тут, или можно скачать тут.

Этот вариант исполнения валидации отлично работает в браузере Google Chrome(10.0.648.127), хорошо в Opera(11.01) и Firefox(4.0b12) и совершенно отказался работать в Internet Explorer(9.0) не в обычном режиме, не в режиме совместимости. 8 версии IE у меня не нету, проверить не могу.

CSS3 псевдо классы пользовательского интерфейса

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

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

В демо выше, я использую required, invalid, и valid псевдо классы для выполнения 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:

<input id="postcode" name="postcode" type="number" min="100000" 
max="999999" maxlength="7" required />

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

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

<input type="tel" id="tel" name="tel" pattern="\d{11}" 
placeholder="Пожалуйства введите ваш номер телефона " required />

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

<input id="password" name="password" type="password" 
title="Минимум 8 знаков, 1 цифра, большие и маленькие буквы" required 
pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*"
/>

Посмотреть результат можно тут, или можно скачать тут.

Валидация полей ввода с помощью css3 & html5

Похожие сообщения: