Валидация в режиме реального времени

Валидация в режиме реального времени.

Открыв файл с шаблоном из листинга 6.24 в браузере, вы заметите, что валидация данных формы происходит не в режиме реального времени. Информация в полях проверяется только после того, как вы нажимаете кнопку отправки формы. Для того чтобы сделать процесс валидации более практичным, мы можем воспользоваться возможностями нескольких атрибутов, предоставляемых объектом ValidityState.

<!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); document. information. addEventListener("input", checkval, 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();

}

}

Function checkval(e){ var elem=e. target; if(elem. validity. valid){

Elem. style. background=’#FFFFFF’;

}else{

Elem. style. background=’#FFDDDD’;

}

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.25 мы добавили в нашу форму новый прослушиватель события input. Каждый раз, когда пользователь модифицирует поля, записывая в них новую информацию или меняя существующую, вызывается функция checkval(), обрабатывающая данное событие.

Функция checkval() также использует свойство target для создания ссылки на элемент, на котором сработало событие. Помимо этого, она контролирует допустимость значения в поле, проверяя состояние valid с помощью атрибута validity, для чего используется конструкция elem. validity. valid.

Состояние valid равно true, если элемент содержит допустимое значение, и false — в противном случае. Имея эту информацию, мы можем менять фоновый цвет элемента, в котором срабатывает событие input. Белый цвет указывает на допустимое значение, а светло-красный — на ошибочное.

Благодаря этому простому усовершенствованию теперь каждый раз, когда пользователь будет изменять информацию в элементах формы, она будет сразу же проходить валидацию, и результат (подсветка элемента

В зависимости от успешности валидации) будет отображаться на экране в режиме реального времени.

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

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