Ограничения валидности

В примере из листинга 6.25 мы проверяли состояние valid. Это состояние представляет собой атрибут объекта ValidityState, который возвращает информацию о том, допустимо ли значение элемента, с учетом всех существующих статусов валидности. Если все проверки на валидность выполняются, то атрибут valid возвращает значение true.

Существует восемь различных статусов валидности для различных условий:

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

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

— patternMismatch. Равен true, если введенные данные не соответствуют указанному для элемента шаблону;

— tooLong. Равен true, если для элемента объявлен атрибут maxlength, но длина введенных данных больше, чем значение атрибута;

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

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

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

— customError. Равен true, когда мы настраиваем обработку специальных ошибок, например применяем изученный ранее метод set-CustomValidity().

Для проверки перечисленных статусов валидности необходимо использовать синтаксис элемент. validity. статус (где статус может принимать одно из значений из предыдущего списка). Эти атрибуты позволяют устанавливать точные причины ошибок в формах, как, например, в следующем фрагменте кода (листинг 6.26).

Листинг 6.26. Отображение специального сообщения об ошибке после проверки статуса валидности

Function sendit(){

Var elem=document. getElementById("nickname"); var valid=document. information. checkValidity(); if(valid){

Document. information. submit();

}else if(elem. validity. patternMismatch || elem. validity. valueMissing){ alert(‘длина имени должна быть не менее 3 символов’);

}

}

В листинге 6.26 мы модифицировали функцию sendit(), переведя контроль над вводимыми данными на более высокий уровень. Форма валиди-руется методом checkValidity(), и, если оказывается, что все элементы содержат допустимые значения, она отправляется на сервер с помощью метода submit(). В противном случае проверяются статусы валидности patternMismatch и valueMissing для элемента ввода nickname, и, если один из них или оба возвращают значение true, выводится сообщение об ошибке.

Замените функцию sendit() в шаблоне из листинга 6.25 новой функцией из листинга 6.26 и откройте этот HTML-файл в своем браузере для проверки.