Главная›Телефон›Валидация или проверка полей формы на ошибки и заполнение. Защита от дурака
Валидация или проверка полей формы на ошибки и заполнение. Защита от дурака
Наряду со всеми новыми атрибутами, типами input и CSS3 псевдо-классами, глава о HTML5 формах, так же определяет простой JavaScript API, что позволяет расширять возможности валидации форм несколькими полезными встроенными методами, атрибутами и событиями. Давайте взглянем на обновленное демо , которое подключает API для проверки ограничений валидации.
Каждое поле формы имеет новый атрибут validity . Атрибут validity возвращает объект ValidityState , который предоставляет текущее состояние валидности. Объект ValidityState содержит несколько булевых переменных, которые определяют какое состояние у определенного элемента. В основном их ответы это true/false которые дают возможность разработчику понять что не так с полем:
valueMissing
Этот атрибут возвращает true, если обязательное поле пустое.
typeMismatch
Распространяется на новые типы input. Например, если значение email не корректно, этот атрибут возвратит true.
patternMismatch
Если элемент содержит атрибут pattern и его значение не соответствует условиям регулярного выражения, атрибут вернет true.
tooLong
Если значение какого либо элемента превышает его maxlength, этот атрибут вернет true.
rangeUnderflow
и rangeOverflow
Если значение элемента выходит за пределы атрибутов min или max, то этот атрибут вернет true.
stepMismatch
Когда элемент с атрибутом step не соответствует требуемому значению, этот атрибут вернет true.
valid
Если любое из вышеперечисленных значений возвращает true, то этот атрибут вернет false. В противном случае, если все условия выполнятся, то вернет true.
Это еще не все
Событие invalid несет еще одну полезную функцию. Он будет вызываться полем, пока его значение будет оставаться невалидным. Так что, с его помощью, мы можем изменять стили полей в соответствии с их текущим состоянием.
Кроме того, метод checkValidity() может быть выполнен на любом отдельном поле или формы в целом, вернув true или false.
Применим к демо
Давайте возьмем наше предыдущее демо и улучшим его при помощи API проверки ограничений валидации. Принимая то, что мы узнали от Luke Wroblewski в статье Inline Validation in Web Forms и наши собственные данные, мы можем применить эти идеи в нашей демо форме, чтобы создать оптимальный валидатор.
Первое, что мы можем исправить - это мгновенная стилизация для не валидного поля. Вместо того, чтобы сразу изменить стиль поля, показывая, что пользователь вводит некорректные данные, мы ждем пока пользователь уйдет из поля.
Если данные отвечают требованиям, даже в то время когда поле в фокусе, мы позволим пользователю узнать, что поле валидно. Мы делаем это путем добавления для input события для проверки валидности поля. Если все верно, то мы обновляем стили и показываем результат сразу.
Если поле имеет некорректное значение, а пользователь переходит к следующему полю, событие blur проверит валидность поля, а потом применит invalid стили. Для того, чтобы пользователь мог знать об ошибке. Это сохранит отображение стилей ошибок, до их исправления.
Что насчет старых браузеров?
Во всех топиках обсуждаются новинки и поддержка современных браузеров, все это хорошо, но двайте не будем забывать о реальном мире, где мы должны поддерживать и устаревшие браузеры. Для этого я написал скрипт помогающий это делать.
Для браузеров не поддерживающих HTML5 формы и API проверки ограничений валидации скрипт эмулирует эту функциональность. Для браузеров поддерживающих эту функциональность, скрипт определит наличие поддержки и выполнится функциональность средствами браузера. Давайте взглянем на очередное обновление демо с добавленным скриптом. Проверьте в IE или Firefox, чтобы увидеть функциональность скрипта, такую же как у браузеров поддерживающих нужную функциональность.
Поддержка браузерами
Скрипт протестирован и работает в следующих браузерах:
Firefox 1+ - FF4 будет иметь встроенную поддержку;
Chrome 4+ - Встроенная поддержка;
Safari 3.2+ - Safari 5 имеет встроенную поддержку;
Opera 9.6+ - Встроенная поддержка.
Функции эмулируемые скриптом:
Каждое поле имеет объект validity , который дает возможность узнать текущее состояние;
Доступен метод checkValidity() указывающий что форма или какой то отдельный элемент не валиден;
Поддержка атрибутов placeholder , required , min , max и step ;
Поддержка атрибутов placeholder и required для textarea ;
Поддержка атрибура required для элемента select ;
Типы email и url для input будут проверяться с помощью встроенного регулярного выражения.
Изобилие проверок
Поддержка браузерами HTML5 форм и моделя CSS3 UI начинает улучшаться. Opera9 продолжит поддержку Web Forms 2.0 пока они не будут объединены с HTML5 формами. В Chrome появилась поддержка с версии 4, Safari получил ее недавно с выходом версии 5, Firefox должен добавить поддержку в предстоящей бета-версии 4 и IE9, если они продолжат свое развитие в таком темпе, тоже должен получить поддержку.
Добавить метки
Вы также можете установить определенное требуемое значение. Вроде email или number.
Это поле является обязательным для заполнения и вводимая информация будет проверяться на соответствие адресу электронной почты. Давайте улучшим UX:
Сообщим пользователю о требуемом формате, когда фокус находится в поле ввода
Напомним ему, если введенные данные не будут валидными
Но еще… не показывайте никаких подсказок, если поле пустое. И не считайте его неверно заполненным. Это может создать ощущение назойливости и будет только раздражать. Для того, чтобы соблюсти эту рекомендацию, мы должны будем узнать, пустое поле или нет.
Проверяем заполнено поле или нет
Мы хотим провернуть фокус с :valid
и :invalid
, но мы не хотим опережать события и считать поле невалидным до того, как оно было заполнено.
Есть ли CSS-селектор для проверки пустоты поля? Вообще-то нет! Вы можете подумать на :empty
,но ошибетесь. Этот псевдокласс предназначен для проверки ситуаций когда элемент не содержит в себе ничего. Поля ввода и так пусты по умолчанию.
Трюк в том, чтобы проверить поле на видимость атрибута placeholder
:
CSS input:not(:placeholder-shown) { }
Мы не использовали плейсхолдер в нашем примере, но это правило сработает, если мы зададим значение из одного пробела:
:placeholder-shown
супер полезен для нас! Это в целом секретный
селектор, позволяющий проверить, есть ли в поле значение или нет.
IE и Firefox пока не поддерживают его, что немного осложняет задачу. Обычно спасителем является новая функция @supports
, но…
CSS
/* Это не сработает */ @supports (input:placeholder-shown) { input:not(:placeholder-shown) { } }
Вы не можете использовать @supports
для селекторов, только для свойства/значения (например @supports (display: flex)).
Проверить плейсхолдер при помощи JavaScript довольно легко:
JavaScript
var i = document.createElement(‘input’); if (‘placeholder’ in i) { }
Но это не кажется самым простым способом имитации :placeholder-shown
. Поэтому…возможно, просто стоит подождать поддержки всеми браузерами.
Представим, что поддержка уже повсеместная и посмотрим, как это будет выглядеть…
SCSS
form {
> div {
> input, > input, > input {
// Когда поле ввода… // 1. НЕ пустое // 2. НЕ в фокусе // 3. НЕ валидно
&:invalid:not(:focus):not(:placeholder-shown) { // Покажем напоминание
background: pink; & + label { opacity: 0; } }
// Когда в невалидное поле устанавливается фокус (и оно по прежнему не пустое)
&:invalid:focus:not(:placeholder-shown) { // Покажем более настойчивое напоминание & ~ .requirements { max-height: 200px; padding: 0 30px 20px 50px; } } }
