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

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

Теория для изучения

• изучение фаз жизненного цикла события:
  • погружения (capturing phase),
  • цели (target phase),
  • всплытия (bubbling stage).
• прекращение всплытия stopPropagation(),
• отмена действия браузера preventDefault().
• атрибуты полей форм:
  • required
  • minlength и maxlength
  • min и max
  • pattern
• использование Constraint Validation API.

Источники

• Элемент диалог
• Атрибут novalidate
• Доступные формы - doka.guide
• Form Validation web.dev
• Form Validation MDN
• Progressively Enhanced Form Validation, Part 1: HTML and CSS
• Progressively Enhanced Form Validation, Part 2: Layering in JavaScript
• «Современный учебник JavaScript»
• Usable and Accessible Form Validation and Error Recovery
• Интерфейсы Веб хранилища

Практическая часть

1. Переключить на ветку main
2. Убедитесь, что все настройки инструментов и необходимые зависимости есть. Если нет, то вернитесь к прошлым работам и настройте.
3. Создайте ветку lab3 и работайте на ней.
4. Создайте index.html и style.css. Из макета прошлого семестра скопируйте шапку и стили в соответствующие файлы.
5. В шапку добавьте кнопку регистрации.
6. Нажатие на эту кнопку открывает showModal() модальное окно созданное с помощью элемента dialog.
7. В модальном окне должна быть корректная форма с полями для ввода имени, почты и пароля и три кнопки: для отправки формы, показа пароля и закрытия модального окна.
8. Все поля обязательны к заполнению. Пароль не может быть короче 6 символов. Эти требования реализовать с помощью атрибутов полей формы.
9. Добавить стили с помощью псевдоклассов :user-valid, :user-invalid.
10. Чтобы избежать конфликта с вашими проверками форме требуется задать атрибут novalidate.
11. В label добавить указание об обязательности заполнения, но не звездочку.
12. В разметку формы сразу добавьте элементы для вывода сообщения об ошибке с минимальной высотой в одну строку и свяжите его с input через атрибут aria-describedby, также добавьте атрибут aria-live со значением polite.
13. Пока сообщений об ошибках нет, элемент может быть скрыт с помощью атрибута hidden.
14. Как только поле теряет фокус (blur), с помощью JS проводится валидация этого поля через объект validity, описывающий состояние корректности поля, и если есть несоответствие то добавляется aria-invalid=“true” к input, сообщение об ошибке вставляется в созданный элемент и с него снимается атрибут hidden. Если ошибка исправлена, то все возвращается в исходное состояние.
15. Отследить на форме событие submit, если все корректно, то собрать данные через FormData() и вывести их в консоль, в противном случае поставить фокус на первое неверное поле. Перезагрузку страницы предотвратить с помощью preventDefault().
16. При нажатии вне модального окна или на кнопку закрытия, оно должно закрываться.
17. Пока нажата кнопка показа пароля меняется тип поля с password на text, как только кнопка отпущена - тип меняется обратно. События: pointerdown и pointerup.
18. Проведите ручное тестирование в браузере.
19. Отформатируйте документы.
20. Убедитесь, что нет замечаний от ESLint.
21. Зафиксируйте результаты работы с помощью системы контроля версий git и отправьте ветку lab3 в репозиторий на github.
22. Загрузите проект на Render через смену ветки в настройках.

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

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

Требования к решению

• HTML код валиден.
• Отсутствуют ошибки ESLint.
• Отсутствуют ошибки в консоли браузера при работе с веб-страницей.
• Отсутствуют ошибки в wave.webaim.org и lighthouse по критерию доступности.

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

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

Статическая веб-страница на хостинге, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

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

1. Элемент dialog, методы showModal() и show().
2. Фазы жизненного цикла события и опции при добавлении обработчика события.
3. Свойства target и currentTarget у объекта события.
4. Объект FormData, примеры методов, перебор его свойств.
5. Предотвращение стандартного поведения элементов.
6. Атрибуты полей форм для добавления ограничений.
7. Цель и методы валидации данных на стороне клиента.
8. Псевдоклассы для изменения стилей для полей формы при валидации и их отличия.
9. Aria-атрибуты aria-describedby, aria-live и aria-invalid.
10. Работа с сообщениями о валидности в Constraint Validation API.