HTML5 проверка данных веб-форм

Проверка веб-форм на стороне пользователей, это очень важно для веб-разработчиков. Перед HTML5 изначально не была поставлена задача осуществление проверки веб-форм, поэтому веб-разработчики прибегают к различным другим решениям.
Чтобы облегчить работу веб-разработчикам, в HTML5 добавили концепцию, известную как  ограничение проверки  — средство проверки веб-форм на стороне пользователя. Несмотря на то, что многое доступно в новых версиях браузерах, тему  ограничение проверки пока можно отнесены к презентации и демонстрации. 

Цель этой статьи, узнать о новых интерфейсах API, чтобы помочь себе и веб-разработчикам делать веб-формы лучше. Что будет в этой статье:

  • Обзор того, что ограничивает проверка.
  • Узнать в текущем ограничений спецификации и реализации браузеров.
  • Примеры, как можно использовать HTML5 для проверки веб-форм.

Что такое ограничение проверки

Пользователь не должен писать свой номер телефона в поле ввода, где нужно указать свой электронный адрес, если пользователь это сделал, будет ошибка. Ограничение проверки по количеству вводимых символов или в поле для ввода телефона можно писать только цифры, потому что телефон состоит из цифр. Чтобы выяснить все это, алгоритм использует новые атрибуты HTML5 min , max , step , pattern , и required  для типа вводимых данных.

Для примера используем эту форму с пустым  input  с атрибутом HTML5 required :



<form><input type="text" required="" value="" />
<input type="submit" value="Отправить" /></form>


Если вы попытаетесь отправить эту форму пустой, без текста, браузер отобразит следующие:

Chrome 21

Ошибка ввода данных в Chrome
Отправлено пустое поле Chrome 21

Firefox 15

Firefox 15 Дисплей
Отправлено пустое поле Firefox 15

Internet Explorer 10

Ошибка ввода данных в Internet Explorer 10
Отправлено пустое поле Internet Explorer 10

Опера 12

Ошибка ввода данных в Opera
Отправлено пустое поле Опера 12

Opera Mobile

Opera Mobile дисплей
Отправлено пустое поле Opera Mobile

Chrome для Android

Chrome для Android дисплей
Отправлено пустое поле Chrome для Android

Firefox для Android

Firefox для Android дисплей
Отправлено пустое поле Firefox для Android

Спецификация не предусматривает полного DOM API, новые атрибуты HTML, CSS и хуки можно использовать только для вида формы.

DOM API

API ограничение проверки добавляет следующие свойства / методы DOM узлов.

Willvalidate

Свойство WillValidate  определяет, нужно ли этому узлу ограничение проверки. Для элемента submittable будет установлено значение ​​ true если узлу по какой то причине запретить ограничение проверки, пишем атрибут disabled .




<div id="one"></div>
<input id="two" type="text" />
<input id="three" type="text" disabled="disabled" />
<script>
    document.getElementById('one').willValidate; //false
    document.getElementById('two').willValidate; //true
    document.getElementById('three').willValidate; //false
</script>


validity

Validity свойства узла DOM возвращает объект ValidityState, содержащий ряд логических свойств, относящиеся к достоверности введенных данных в поле веб-формы.

CustomError: true , если для сообщений пользователя был установлен вызов  setCustomValidity() .




  <input id="foo" type="text" />
  <input id="bar" type="text" />
<script>
    document.getElementById('foo').validity.customError; //false
    document.getElementById('bar').setCustomValidity('Invalid');
    document.getElementById('bar').validity.customError; //true
</script>


patternMismatch: true , если узел value не соответствует атрибутам pattern .



<input id="foo" type="text" pattern="[0-9]{4}" value="1234" />
<input id="bar" type="text" pattern="[0-9]{4}" value="ABCD" />
<script>
    document.getElementById('foo').validity.patternMismatch; //false
    document.getElementById('bar').validity.patternMismatch; //true
</script>


rangeOverflow: tue , если узел value превышает атрибут   max .



<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
<script>
    document.getElementById('foo').validity.rangeOverflow; //false
    document.getElementById('bar').validity.rangeOverflow; //true
</script>


rangeUnderflow: true , если узел value имеет значение меньше чем атрибут   min .



<input id="foo" type="number" min="2" value="3" />
<input id="bar" type="number" min="2" value="1" />
<script>
    document.getElementById('foo').validity.rangeUnderflow; //false
    document.getElementById('bar').validity.rangeUnderflow; //true
</script>


stepMismatch: true , если узел не value имеет значение атрибута step .



<input id="foo" type="number" step="2" value="4" />
<input id="bar" type="number" step="2" value="3" />
<script>
    document.getElementById('foo').validity.stepMismatch; //false
    document.getElementById('bar').validity.stepMismatch; //true
</script>


tooLong: true , если узел value превышает атрибут maxlength .

Все браузеры покажут пользователю не верные вводные значения, которые превышают maxlength .



<input id="foo" type="text" maxlength="1" value="A" />
<input id="bar" type="text" maxlength="1" value="AB" />
<script>
    document.getElementById('foo').validity.tooLong; //false
    document.getElementById('bar').validity.tooLong; //true in Opera, false in other supported browsers.
</script>


Ожидаем значения tooLong . typeMismatch: true , для WebKit и Firefox если в узле value  каждый его атрибут type  неправильный.



<input id="foo" type="url" value="http://foo.com" />
<input id="bar" type="url" value="foo" />
<input id="foo2" type="email" value="foo@foo.com" />
<input id="bar2" type="email" value="bar" />
<script>
    document.getElementById('foo').validity.typeMismatch; //false
    document.getElementById('bar').validity.typeMismatch; //true

    document.getElementById('foo2').validity.typeMismatch; //false
    document.getElementById('bar2').validity.typeMismatch; //true
</script>


valueMissing: true , если узел имеет обязательный атрибут required, но узел value  пуст.



<input id="foo" type="text" required="" value="foo" />
<input id="bar" type="text" required="" value="" />
<script>
    document.getElementById('foo').validity.valueMissing; //false
    document.getElementById('bar').validity.valueMissing; //true
</script>


valid: true , если все действия условий, перечисленных выше, являются false .



<input id="valid-1" type="text" required="" value="foo" />
<input id="valid-2" type="text" required="" value="" />
<script>
    document.getElementById('valid-1').validity.valid; //true
    document.getElementById('valid-2').validity.valid; //false
</script>


ValidationMessage

ValidationMessage  свойства узла DOM содержит сообщение, которое браузер отображает пользователю, когда действия узла не удается проверить. Браузер предоставляет по умолчанию локализованные сообщения для этого свойства. Если узел DOM не является кандидатом на ограничение проверки или, если узел содержит действительные данные  ValidationMessage  будет установлен в пустую строку.

Для оперы не нужно заполнять это свойство по умолчанию. Оно будет показывать пользователю правильное сообщение об ошибке, просто не заполняется в свойствах.



<input id="foo" type="text" required="" />
<script>
    document.getElementById('foo').validationMessage;
    //Chrome  --> 'Please fill out this field.'
    //Firefox --> 'Please fill out this field.'
    //Safari  --> 'value missing'
    //IE10    --> 'This is a required field.'
    //Opera   --> ''
</script>


CheckValidity ()

Метод checkValidity для элементов узла (например, input, select, textarea) возвращает true , если элемент содержит достоверные данные. Форма узлов возвращает true , если все формы, содержат допустимые данные.




<form id="form-1"><input id="input-1" type="text" required="" /></form><form id="form-2"><input id="input-2" type="text" /></form>

<script>
    document.getElementById('form-1').checkValidity();  //false
    document.getElementById('input-1').checkValidity(); //false

    document.getElementById('form-2').checkValidity();  //true
    document.getElementById('input-2').checkValidity(); //true
</script>


Кроме того, когда каждый раз, действия элемента формы validity (проверить) с помощью  checkValidity  и не удалось,  invalid  (недействительные) события вызывается для этого узла. На примере кода выше, если вы хотите запустить каждый раз, узел с идентификатором  input-1  был проверен и данные недействительные, содержание можно использовать следующие:



document.getElementById('input-1').addEventListener('invalid', function() {
    //...
}, false);


Существует случай no valid, но вы можете использовать событие изменений для уведомления о том, когда поле действия изменено.



if (document.getElementById('password1').value != document.getElementById('password2').value) {
    document.getElementById('password1').setCustomValidity('Passwords must match.');
} else {
    document.getElementById('password1').setCustomValidity('');
}


SetCustomValidity()

Метод SetCustomValidity  изменяет свойства ValidationMessage , а также позволяет добавлять пользовательские правила проверки. Потому что установка  ValidationMessage  проходящей с пустой строкой отмечает поля действительными и попутно любая другая строка отмечается недействительной. К сожалению, нет способа установки  ValidationMessage , также не изменяя действительность поля. Например, если у вас есть два поля для паролей, которые работали одинаково, можно использовать следующие:



if (document.getElementById('password1').value != document.getElementById('password2').value) {
    document.getElementById('password1').setCustomValidity('Passwords must match.');
} else {
    document.getElementById('password1').setCustomValidity('');
}


Атрибуты HTML

Мы уже видели, что maxlength , min , max , step , pattern , и type атрибуты, используемые браузером для ограничения данных. Для ограничения проверки есть два дополнительные соответствующие атрибуты — novalidate и formnovalidate .

Novalidate

Атрибут Novalidate , может быть применен к форме. При наличии этого атрибута означает, что данные формы не должны проверяться.



<form novalidate=""><input type="text" required="" />
<input type="submit" value="Отправить" /></form>


Formnovalidate

Логический атрибут formnovalidate может быть применен к узлам кнопки и входа, чтобы предотвратить представления. Например:




<form><input type="text" required="" />
<input type="submit" value="Проверка" />
<input type="submit" formnovalidate="" value="Не проверять" /></form>




Если нажать кнопку «Проверка», обработка формы будут остановлена из-за пустого ввода. А если нажать кнопку «Не проверять», форма будет обрабатываться несмотря на неправильные данные из-за атрибута formnovalidate .

CSS

CSS добавит эффекты формы проверки, даже отображение ошибки ввода в нужном месте.

:valid, :invalid

В поддержке браузеров :valid pseudoselector будут соответствовать элементы формы, которые соответствуют указанным ограничениям, а также :invalid pseudoselector будет совпадают с теми, которые этого не делают.



<form><input id="foo" type="text" required="" />
<input id="bar" type="text" /></form>
<script>
    document.querySelectorAll('input[type="text"]:invalid'); //Matches input#foo
    document.querySelectorAll('input[type="text"]:valid');   //Matches input#bar
</script>


Сделать стили по умолчанию

По умолчанию Firefox ставит box-shadow  и IE10 местами красный  outline (контур) на  :invalid (неправильные) поля.

Firefox 15

Firefox по умолчанию отображение поля ошибки
Отображение поля ошибки в Firefox 15

Internet Explorer 10

IE10 по умолчанию отображение поля ошибки
Отображение поля ошибки в Internet Explorer 10

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



:invalid {
    box-shadow: none; /* FF */
    outline: 0;       /* IE 10 */
}


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>