03

Валидация данных в форме

Цель: изучить работу с формами и их событиями, освоить использование Constraint Validation API.

Подготовка

Изучите фазы жизненного цикла события: - погружения (capturing phase), - цели (target phase), - всплытия (bubbling stage).

Возможности прекращение всплытия stopPropagation(),

Повторите атрибуты полей форм: required, minlength и maxlength, min и max, pattern и их связь с Constraint Validation API.

Изучите материалы о валидации форм и их правильной организации по источникам ниже.

Изучите возможности автозаполнения полей и атрибут autocomplete.

Источники

Выполнение

Переключитесь на ветку main, убедитесь, что все настройки инструментов и необходимые зависимости есть. Если нет, то вернитесь к прошлым работам и настройте.

Создайте новую ветку lab3 и эту работу выполняйте на ней. Создайте документ index.html. К нему подключите CSS библиотеку на ваш выбор, чтобы создать шапку с навигацией близкую к реальной и в нее добавьте кнопку регистрации.

Нажатие на эту кнопку открывает модальное окно. Используйте элемент dialog. После открытия модального окна у пользователя не должно быть возможности взаимодействовать с другими элементами до его закрытия. При нажатии вне модального окна или на кнопку закрытия, оно должно закрываться.

В модальном окне создайте корректную форму с полями для ввода имени, почты, телефона, возраста, ссылки на профиль гитхаба, даты регистрации на гитхабе, пароля и три кнопки: для отправки формы, показа пароля и закрытия модального окна. Чтобы избежать конфликта с вашими проверками форме требуется задать атрибут novalidate. В label добавить указание об обязательности заполнения, но не звездочку. К полям формы также добавьте возможность автодополнения через атрибут autocomplete и подходящий <token-list>.

Ограничения:

  • имя и почта обязательны к заполнению;
  • имя не содержит цифр и длиннее одного символа;
  • почта имеет корректный формат;
  • телефон должен содержать нужное количество цифр;
  • возраст число и не более 99 лет;
  • ссылка корректный url;
  • дата регистрации не может быть в будущем;
  • ссылка на профиль не может быть без даты и наоборот.
  • пароль не может быть короче 6 символов.

Пока нажата кнопка показа пароля меняется тип поля с password на text, как только кнопка отпущена - тип меняется обратно. События: pointerdown и pointerup.

Добавьте стили для обозначения корректности заполнения полей с помощью псевдоклассов :user-valid, :user-invalid.

Способы обозначения ошибки:

  • Отображение сообщений или маркеров красного цвета рядом с каждым некорректным полем.
  • Изменение цвета фона или границы неверных полей на красный.
  • Изменение цвета label’а.

В разметку формы сразу добавьте элементы для вывода сообщения об ошибке с минимальной высотой в одну строку и свяжите его с input через атрибут aria-describedby, также добавьте атрибут aria-live со значением polite. Пока сообщений об ошибках нет, элемент может быть скрыт с помощью атрибута hidden.

Как только поле теряет фокус (blur), с помощью JS проводится валидация этого поля через объект validity и дополнительные проверки, если требует ограничение, и если есть несоответствие то добавляется aria-invalid=“true” к input, сообщение об ошибке вставляется в созданный элемент и с него снимается атрибут hidden. Если ошибка исправлена, то все возвращается в исходное состояние.

Текст сообщения об ошибке должен быть максимально информативным и понятным.

На форме нужно обработать событие submit, если все корректно, то собрать данные через FormData() и вывести их на странице в виде красивой карточки, а модальное окно закрыть. Телефон в карточке должен быть отформатирован к виду +7 (111) 111-1111. В противном случае поставить фокус на первое неверное поле.

Проведите ручное тестирование в браузере, отформатируйте документы, убедитесь, что нет замечаний от ESLint и зафиксируйте результаты работы с помощью системы контроля версий git и отправьте ветку lab3 в репозиторий на github.

Требования

  • HTML код валиден.
  • Весь код отформатирован.
  • Отсутствуют ошибки ESLint.
  • Отсутствуют ошибки в консоли браузера при работе с веб-страницей.
  • Отсутствуют анонимные функции при использовании метода .addEventListener().
  • Текст в интерфейсе русский.
  • Отсутствуют ошибки в lighthouse по критерию доступности.