Интерактивная валидация HTML форм

Дата публикации: 2016-12-26

От автора: создание форм в HTML всегда было сложным занятием. Сперва необходимо написать разметку, затем проверить значения полей перед отправкой и, наконец, нужно уведомить пользователя о проблемах, если таковые возникли. К нашему общему счастью в HTML5 были представлены новые возможности, упрощающие валидацию форм. В частности, поля формы теперь поддерживают условия, что позволяет браузеру проводить валидацию контента форм на стороне клиента без задействования JS.

В webkit браузерах уже была частичная поддержка условий. Раньше для описания условий можно было использовать атрибуты полей формы, после чего проверять отдельные поля или всю форму на валидность через checkValidity() API в JS. ValidityState API также позволял определять конкретное поле, где было нарушено условие валидации.

Однако webkit браузеры не поддерживали интерактивную валидацию HTML форм, которая должна срабатывать в момент отправки формы (если тегу

не задан атрибут novalidate) или при использовании reportValidity() API. Мы рады сообщить, что интерактивная валидация форм теперь работает в webkit браузерах и доступна в Safari Technology Preview 19. Теперь во время валидации формы webkit проверяет правильность заполнения всех полей. Если есть хоть одно нарушение условия валидации, webkit пролистает экран до первого нарушения и покажет всплывающее облачко с сообщением, в котором будет объяснена проблема.

Условия валидации

Тип поля

У некоторых типов полей есть встроенные условия валидации. У полей типа email, number и URL есть автоматическая проверка значения на соответствие электронной почте, числу и адресу. Например:

<input type="email">

1	<input type="email">

Атрибуты валидации

Для записи условий в полях формы можно использовать следующие атрибуты:

required: показывает на то, что данное значения обязательно для ввода.

pattern=“[a-z]”: указывает, что пользователь должен ввести значение, которое проходит проверку регулярным выражением из JS.

minlength=x: указывает, что пользователь должен ввести значение как минимум из Х символов.

maxlength=y: указывает, что пользователь может ввести максимум У символов.

min=x: указывает, что пользователь должен ввести значение, большее или равное Х.

max=y: указывает, что пользователь должен ввести значение, меньшее или равное У.

step=x: указывает, что пользователь должен ввести значение, которое равно min + целое число кратное Х.

Условная валидация

Провести условную валидацию можно несколькими способами:

Можно вызвать checkValidity() на всю форму или конкретное поле. Если условие нарушено, будет просто возвращено false, в обратном случае true. На не прошедшем валидацию поле (ях) сработает событие invalid. Узнать поле, которое не прошло валидацию, можно с помощью объекта ValidityState, который можно получить через атрибут validity поля формы.

Можно вызвать reportValidity() на всю форму или конкретное поле. Функция запускает интерактивную валидацию условий. Помимо того, что функция делает то же самое, что checkValidity(),reportValidity() также поставит в фокус первый не прошедший валидацию элемент, прокрутит экран до него и покажет всплывающее облачно с сообщением, объясняющим проблему.

Интерактивная валидация формы срабатывает при отправке ее на сервер, если у тега

не задан атрибут novalidate.

Пользовательские условия

Для конкретного поля можно реализовать более сложные условия валидации или записать свое сообщение об ошибке при помощи валидации через JS и последующем использовании setCustomValidity() API.

JS можно запустить при помощи события (например, onchange, oninput и т.д.) на поле формы. Исполняемый код JS может проверять данные из полей формы и обновлять сообщение об ошибке через setCustomValidity():

<label for="feeling">Feeling:</label>
<input id="feeling" type="text" oninput="validateFeeling(this)">
<script>
 function validateFeeling(input) {
   if (input.value == "good" || input.value == "fine" || input.value == "tired") {
     input.setCustomValidity('"' + input.value + '" is not a feeling');
   } else {
     // Данные прошли проверку, сбрасываем сообщение об ошибке.
     input.setCustomValidity('');
   }
 }
</script>

<label for="feeling">Feeling:</label>

function validateFeeling(input) {

if (input.value == "good" || input.value == "fine" || input.value == "tired") {

input.setCustomValidity('"' + input.value + '" is not a feeling');

} else {

// Данные прошли проверку, сбрасываем сообщение об ошибке.

input.setCustomValidity('');

}

</script>

Облачко с сообщением

После интерактивной валидации формы возле первого поля, не прошедшего проверку, появится облачко с сообщением:

Интерактивная валидация HTML форм

Для встроенных условий валидации есть набор локализованных сообщений. Изменить сообщение можно при помощи setCustomValidity() API. Обратите внимание на то, что webkit поддерживает JavaScript internationalization API, с помощью которого можно локализовать свои сообщения об ошибках.

Заключение

Теперь в webkit поддерживается интерактивная валидация HTML форм, а также она доступна по умолчанию в Safari Technology Preview 19. Посмотрите наше демо и экспериментируйте с валидацией. Сообщения о багах приветствуются.

Редакция: Chris Dumez

Источник: //webkit.org/

Редакция: Команда webformyself.

Метки: верстка