Атрибут willValidate

Атрибут 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, когда в элементе возникает специальная ошибка, настраиваемая индивидуально.

Вам также могут быть интересны следующие статьи:

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

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