Каждый раз, когда пользователь подтверждает отправку формы, в случае обнаружения поля с недопустимым содержимым срабатывает событие. Оно называется invalid и связано с элементом, ставшим причиной ошибки. Для настройки собственного варианта реагирования на данное событие можно зарегистрировать специальный обработчик события, как в листинге 6.24.
Листинг 6.24. Наша собственная система валидации
<!DOCTYPE html>
<html lang="ru">
<head>
<title>opMbi</title>
<script>
Function initiate(){
Age=document. getElementById("myage"); age. addEventListener("change", changerange, false);
Document. information. addEventListener("invalid", validation, true);
Document. getElementById("send").addEventListener("click",
Sendit, false);
}
Function changerange(){
Var output=document. getElementById("range"); var calc=age. value-20; if(calc<20){ calc=0; age. value=20;
}
Output. innerHTML=calc+’ to ‘+age. value;
}
Function validation(e){ var elem=e. target; elem. style. background=’#FFDDDD’;
}
Function sendit(){
Var valid=document. information. checkValidity(); if(valid){
Document. information. submit();
}
}
Window. addEventListener("load", initiate, false);
</script>
</head>
<body>
<section id="form">
Form name="information" method="get">
Имя:
<input pattern="[A-Za-z]{3,}" name="nickname" id="nickname" maxlength="10" required>
Email:
<input type="email" name="myemail" id="myemail" required> Возрастной диапазон:
<input type="range" name="myage" id="myage" min="0" max="80" step="20" value="20">
<output id="range">oT 0 до 20</output>
<input type="button" id="send" value="oтправить">
</form>
</section>
</body>
</html>
В листинге 6.24 мы создали новую форму с тремя полями ввода, в которых запрашиваются имя, адрес электронной почты и возраст в диапазоне 20 лет.
У поля nickname три дополнительных атрибута валидации: pattern, разрешающий ввод не менее 3 символов и проверяющий, что это буквы от A до Z (в верхнем или нижнем регистре), maxlength, ограничивающий количество вводимых символов десятью, и required, создающий ошибку в случае, если поле остается незаполненным. На поле email накладываются естественные ограничения, диктуемые его природой, к нему также применяется атрибут required. Для поля ввода range мы добавили атрибуты min, max, step и value, устанавливающие условия диапазона.
Кроме того, мы объявляем элемент <output>, в целях информирования показывающий выбранный диапазон на экране.
JavaScript-код в этом примере выполняет очень простую задачу: когда пользователь щелкает на кнопке Отправить, для всех полей с недопустимым содержимым срабатывает событие invalid, а функция validation() меняет фоновый цвет этих полей на светло-красный.
Давайте внимательнее рассмотрим процесс обработки. Код начинает выполняться после срабатывания типичного события load, то есть после полной загрузки документа. Выполняется функция initiate(), и добавляются три прослушивателя для событий change, invalid и click.
Каждый раз, когда элемент формы по какой-либо причине меняется, для него срабатывает событие change. Когда это происходит для поля ввода range, мы захватываем данное событие и вызываем функцию changerange(). Таким образом, когда пользователь выбирает новый возрастной диапазон, передвигая ползунок этого элемента управления, функция changerange() вычисляет новые граничные значения диапазона. С этим элементом ввода данных связаны двадцатилетние периоды, например от 0 до 20 или от 20 до 40. Однако элемент возвращает только одно значение, такое как 20, 40, 60 или 80. Для вычисления начального значения диапазона мы вычитаем 20 из текущего значения элемента
Range с помощью формулы age. value — 20 и сохраняем результат в переменной calc. Минимальный возможный период — от 0 до 20; таким образом, в условном операторе if мы проверяем это условие и не позволяем устанавливать период меньшей длины (для того чтобы понять, как это работает, изучите код функции changerange()).
Второй прослушиватель добавляется в функцию initiate() и также отслеживает событие invalid, а в случае, если событие срабатывает, вызывает функцию validation(). Эта функция меняет фоновый цвет полей с недопустимыми значениями. Вспомните, что событие срабатывает при щелчке на кнопке отправки формы и ссылается не на форму и не на кнопку отправки, а на элемент ввода, в котором произошла ошибка. В функции validation() мы захватываем эту ссылку и сохраняем в переменной elem, используя для этого переменную e и свойство target. Таким образом, конструкция e. target возвращает ссылку на элемент ввода с недопустимым значением. В следующей строке функции validation() фоновый цвет меняется только для этого элемента.
Вернемся к функции initiate(), для того чтобы проанализировать еще один прослушиватель. Чтобы обладать полным контролем над подачей формы и моментом валидации, мы создали обычную кнопку, а не кнопку со специальной функциональностью submit. Когда пользователь щелкает на нашей кнопке, форма отправляется на сервер, однако происходит это только в том случае, если все элементы заполнены допустимыми значениями. Прослушиватель события click, который мы связали с кнопкой внутри функции initiate(), после щелчка на кнопке вызывает функцию sendit(). Используя метод checkValidity(), мы заставляем браузер выполнить валидацию и отправляем форму через традиционный метод submit() только в том случае, если условий ошибки не осталось. Благодаря JavaScript-коду, добавленному в этот документ, мы взяли в свои руки контроль над всем процессом валидации, настроив по своему усмотрению каждый аспект и поведение браузера.
Добавить комментарий