12

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

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

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

Порядок выполнения лабораторной работы:

  1. Изучить:
    • изучение фаз жизненного цикла события:
      • погружения (capturing phase),
      • цели (target phase),
      • всплытия (bubbling stage).
    • добавление обработки событий addEventListener,
    • работа с объектом event,
    • прекращение всплытия stopPropagation(),
    • отмена действия браузера preventDefault().
    • атрибуты полей форм:
      • required
      • minlength и maxlength
      • min и max
      • pattern
    • использование Constraint Validation API.
  2. Для выполнения работы необходимо:
    • В index.html с основным макетом в шапке (header) добавить кнопку регистрации.
    • Используя решение из предыдущей лабораторной роботы, реализовать модальное окно, которое открывается при нажатии на кнопку регистрации.
    • В модальном окне должна быть корректная форма с полями для ввода имени, почты и пароля и две кнопки: для отправки формы и для показа пароля.
    • Все поля обязательны к заполнению. Пароль не может быть короче 6 символов. Эти требования реализовать с помощью атрибутов полей формы.
    • В разметку формы сразу добавьте элемент для вывода сообщения об ошибке с минимальной высотой в одну строку.
    • Пока нажата кнопка показа пароля меняется тип поля с password на text, как только кнопка отпущена - тип меняется обратно. События: pointerdown pointerup.
    • Как только поле теряет фокус (blur), с помощью JS проводится валидация этого поля и если есть несоответствие то сообщение об этом попадает в элемент для вывода сообщения. Это же этот текст задать в setCustomValidity(). Если ошибок нет, то сообщение стирается из обоих мест.
    • Отследить на форме событие submit, собрать данные через FormData() и вывести их в консоль. Перезагрузку страницы предотвратить с помощью preventDefault(). Модальное окно скрыть и с помощью решения из задачи №4 прошлой лабораторной показать сообщение, что данные успешно отправлены.
    • При нажатии вне модального окна, оно должно скрываться.
  3. Проверить код с помощью ES Lint и исправить ошибки.
  4. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.
  5. Загрузить проект на сервер через sftp или используя ssh.

Требования к HTML и JS:

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

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница, сгенерированная с помощью команды npm run build, на хостинге проверенная, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

Вопросы для защиты

  1. Назовите фазы жизненного цикла события.
  2. На какой фазе изначально срабатывают обработчики событий?
  3. Всплывают ли события blur и focus?
  4. Для чего нужен preventDefault()?
  5. Какие атрибуты полей форм можно использовать для добавления ограничений?
  6. Почему требуется проверять данные на стороне клиента?
  7. Что позволяет задать метод setCustomValidity()?
  8. В какой момент показывается сообщение заданное в setCustomValidity()?
Задать вопрос наставнику
Предыдущая