В примере из листинга 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-файл в своем браузере для проверки.
Добавить комментарий