Метод setCustomValidity()

Метод setCustomValidity().

Браузеры с поддержкой HTML5 умеют выводить сообщения об ошибке, когда пользователь пытается отправить форму с недопустимым содержимым в каком-либо поле. Однако благодаря методу setCustom-Validity (сообщение) мы можем создавать собственные сообщения об ошибках, отвечающие требованиям к валидации наших приложений. Этот метод позволяет настраивать обработку ошибок с выводом сообщения при попытке отправить форму. Пустое сообщение в методе очищает состояние ошибки.

Листинг 6.23. Настройка сообщений об ошибках

<! DOCTYPE html>

<html lang="ru">

<head>

<script>

Function initiate (){

Name1=document. getElementById ("firstname"); name2=document. getElementById ("lastname"); name1. addEventListener ("input", validation, false); name2. addEventListener ("input", validation, false); validation ();

}

Function validation (){

If (name1. value==» && name2. value==»){

Name1. setCustomValidity (‘введите хотя бы одно имя’); name1. style. background=’#FFDDDD’;

}else{

Name1. setCustomValidity (»);

Name1. style. background=’#FFFFFF’;

}

Window. addEventListener ("load", initiate, false);

</script>

</head>

<body>

<section id="form">

Form name="registration" method="get">

Имя:

<input type="text" name="firstname" id="firstname">

Фамилия:

<input type="text" name="lastname" id="lastname">

<input type="submit" id="send" value="отправить">

</form>

</section>

</body>

</html>

Код из листинга 6.23 иллюстрирует ситуацию комплексной валидации. Создаются два поля ввода, в которых пользователь должен указать свои имя и фамилию. Однако ошибка валидации возникает только в одном случае — когда оба поля пусты. Чтобы форма была успешно проверена и отправлена, пользователь должен ввести хотя бы одно значение — имя или фамилию.

В подобных случаях невозможно использовать атрибут required, так как мы не знаем, какое поле решит заполнить пользователь. Только с помощью JavaScript-кода и индивидуального программирования обработки ошибок можно создать эффективный механизм валидации для подобного сценария.

Наш код начинает выполняться, когда срабатывает событие load. Для обработки этого события вызывается функция initiate (). Она создает ссылки на два элемента <input> и для обоих добавляет прослушиватели для отслеживания события input. Прослушиватели вызывают функцию validation () каждый раз, когда пользователь вводит данные в соответствующие поля.

Поскольку при первоначальной загрузке документа элементы <input> не содержат никаких данных, необходимо задать условие, запрещающее отправку формы до того, как хотя бы одно из полей будет заполнено. По этой причине в начале кода вызывается функция validation (), проверяющая описанное условие. Если вместо обоих имен она находит пустые строки, то создает ошибку и меняет фоновый цвет элемента firstname на светло-красный.

Однако если позднее условие ошибки перестает выполняться, так как пользователь заполнил по меньшей мере одно поле, ошибка сбрасывается, а фоновый цвет элемента firstname вновь меняется на белый.

Важно понимать, что единственное изменение, происходящее во время обработки содержимого формы, заключается в переключении фонового цвета. Сообщение об ошибке, объявленное с помощью setCustomVali-dity (), будет отображаться только в том случае, если пользователь попытается отправить форму.

В целях тестирования мы добавили JavaScript-код прямо в документ. Таким образом, для тестирования примера вам нужно всего лишь скопировать код из листинга 6.23 в пустой HTML-файл и открыть этот файл в своем браузере.

API Forms (Формы) пока что находится на этапе разработки, поэтому в зависимости от того, насколько продвинется процесс к тому моменту, как вы станете читать эту книгу, вам может потребоваться множество проверок примеров кода из этой главы, чтобы увидеть, как они будут работать в разных браузерах.

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

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