Атрибут willValidate

В динамических приложениях возможны ситуации, когда определенные элементы вообще не требуют валидации. Например, так может случиться с кнопками, скрытыми элементами ввода или элементом <output>. Распознать это условие можно с помощью атрибута willValidate, используя синтаксис элемент. willValidate.

Формы и API Forms — краткий справочник

Формы — это основной путь коммуникации между пользователями и веб-приложениями. В HTML5 были добавлены новые типы элементов <input>, новый API для валидации и обработки форм, а также атрибуты, совершенствующие данный интерфейс.

Типы

В некоторые из новых типов ввода, появившихся в HTML5, по умолчанию встроены условия валидации. Другие всего лишь объявляют о назначении соответствующего поля, что помогает браузеру выбрать наиболее подходящий способ визуализации:

— email. Проверяет предоставленные пользователем данные на соответствие формату адреса электронной почты;

— search. Предоставляет браузеру информацию о назначении поля для упрощения его визуализации на странице;

— url. Проверяет предоставленные пользователем данные на соответствие формату адреса веб-страницы;

— tel. Предоставляет браузеру информацию о назначении поля (здесь должен быть указан телефонный номер) для упрощения его визуализации на странице;

— number. Проверяет, что пользователь ввел числовое значение. Его можно комбинировать с другими атрибутами (такими, как min, max и step) для ограничения поддерживаемого диапазона чисел;

— range. Создает на странице ползунок, позволяющий выбрать числовое значение. Доступный диапазон ограничивается атрибутами min, max и step. Атрибут value устанавливает начальное значение элемента;

— date. Проверяет предоставленные пользователем данные на соответствие формату даты «год-месяц-день»;

— month. Проверяет предоставленные пользователем данные на соответствие формату даты «год-месяц»;

— week. Проверяет предоставленные пользователем данные на соответствие формату даты «год-неделя», где второе значение представляет собой букву W, за которой следует номер недели;

— time. Проверяет предоставленные пользователем данные на соответствие формату времени «часы:минуты:секунды». Также поддерживаются другие варианты синтаксиса, такие как «часы:минуты»;

— datetime. Проверяет предоставленные пользователем данные на соответствие полному формату даты, включая часовой пояс;

— datetime-local. Проверяет предоставленные пользователем данные на соответствие полному формату даты, но без часового пояса;

— color. Проверяет, что предоставленные пользователем данные представляют собой строку с закодированным значением одного цвета.

Атрибуты

Новые атрибуты были добавлены в HTML5 для расширения функциональности форм и управления валидацией:

— autocomplete. Указывает, должны ли вводимые значения сохраняться и в будущем предлагаться пользователю в виде списка возможных вариантов. Он может принимать два значения: on и off;

— autofocus. Булев атрибут, он переводит фокус ввода на элемент после того, как страница полностью загрузится;

— novalidate. Используется только с элементами <form>. Это булев атрибут, указывающий, должна ли выполняться валидация данных всей формы;

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

— placeholder. Позволяет создать подсказку, помогающую пользователю при заполнении элемента. Его значением может быть одно слово или короткий текст, который будет отображаться внутри поля ввода в случае, когда фокус ввода находится не на этом элементе;

— required. Объявляет элемент обязательным для валидации. Это булев атрибут, который не позволяет отправлять форму до тех пор, пока для этого атрибута не будет указано подходящее значение;

— pattern. Позволяет добавить регулярное выражение, на соответствие которому будут проверяться предоставленные пользователем данные;

— multiple. Булев атрибут, позволяющий ввести несколько значений в одном поле. Например, пользователь может указать несколько адресов электронной почты, разделив их запятыми;

— form. Связывает элемент с формой. Его значением должно быть значение атрибута id нужной формы;

— list. Связывает элемент с элементом <datalist>, в котором определен список возможных значений для данного поля ввода. Значением данного атрибута должно быть значение атрибута id нужного элемента <datalist>.

Элементы

В HTML5 также появились новые элементы, улучшающие и расширяющие функциональность форм:

— <datalist>. Позволяет создать список вариантов, которые будут предлагаться в элементе <input> в качестве возможных значений. Для конструирования списка используется элемент <option>, а каждый из вариантов объявляется с атрибутами value и label. Список вариантов связывается с элементом <input> через атрибут list;

— <progress>. Отражает степень завершения задачи, например загрузки данных;

— <meter>. Отражает некоторое измеряемое значение, например расход пропускной способности;

— <output>. Представляет выходные данные динамического приложения.

Методы

В спецификацию HTML5 входит специальный API для форм, предлагающий новые методы, события и свойства. Наиболее важные методы перечислены далее:

— setCustomValidity(сooбщение). Позволяет объявить ошибку и задать сообщение об ошибке для специального процесса валидации. Чтобы сбросить ошибку, необходимо вызвать данный метод, передав ему в качестве атрибута пустую строку;

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

События

Далее перечислены события, входящие в API форм:

— invalid. Срабатывает, если во время процесса валидации обнаруживается элемент с недопустимым содержимым;

— forminput. Срабатывает, когда пользователь вводит какие-либо данные в форму;

— formchange. Срабатывает, когда в данных формы происходят какие-либо изменения.

Статусы

В API Forms (Формы) были добавлены различные проверки статусов, помогающие настраивать специальные процессы валидации:

— valid. Это общий статус валидности. Он возвращает значение true в том случае, когда ни один из остальных статусов не истинен (их значение не равно true), и это означает, что элемент успешно проходит валидацию;

— valueMissing. Равен true, когда для элемента определен атрибут required, но пользователь не заполнил его;

— typeMismatch. Равен true, когда введенное пользователем значение не соответствует ожидаемому, например, в полях для ввода адреса электронной почты или URL-адреса;

— patternMismatch. Равен true, когда введенное пользователем значение не соответствует регулярному выражению, определенному с помощью атрибута pattern;

— tooLong. Равен true, когда длина введенного значения превышает значение атрибута maxlength;

— rangeUnderflow. Равен true, когда введенное значение меньше значения атрибута min;

— rangeOverflow. Равен true, когда введенное значение больше значения атрибута max;

— stepMismatch. Равен true, когда значение атрибута step не соответствует значениям атрибутов min, max и value;

— customError. Равен true, когда в элементе возникает специальная ошибка, настраиваемая индивидуально.