Валидация на стороне клиента

Цель: познакомиться с понятиями идентификации, аутентификации и авторизации. Реализовать аутентификацию основанную на сессиях.

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

1. Изучить:

   • объектную модель документа DOM;
   • способы получения элементов или списков элементов из дерева;
   • работу со свойствами и методами элементов дерева;
   • редактирование текстового содержимого объектов;
   • управление стилями элементов и классами;
   • события и объект event;
   • добавление обработчиков событий и работа с объектом event;
   • фазы жизненного цикла события;
   • возможности Fetch API (fetch(), Response);

2. Продолжить работу на ветке предыдущей работы.

3. Добавить к проекту статическую страницу comment.html и файлы validate.js и fetch.js.

4. В файле comment.html должна быть форма для отправки комментария. К этому документу подключены и validate.js и fetch.js.

5. В файле validate.js реализована валидация для полей форм. Готовое решение с разбором есть в статье [Мгновенная валидация форм] (https://doka.guide/recipes/validation/)

6. Файл validate.js подключите и к формам в login и signup. В них валидация также должна работать.

7. В fetch.js, который подключается к comment.html, реализуйте отправку данных в формате JSON с помощью fetch API.

8. Провести ручное тестирование в браузере.

9. Отформатировать документы.

10. Убедиться, что нет замечаний от ESLint.

11. Зафиксировать результаты работы с помощью системы контроля версий git на github.

Требования к коду:

HTML код валиден. Отсутствуют ошибки в wave.webaim.org и lighthouse по критерию доступности. Отсутствуют ошибки ESLint в панели Problems в VS Code. Отсутствуют ошибки в консоли браузера при работе с веб-страницей. Отсутствуют анонимные функции при использовании метода .addEventListener().

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

Работающий локально сервер с логикой, которая соответствует требованиям. Код отформатирован, не содержит ошибок и замечаний от статического анализа кода ESLint, сохранен в системе контроля версий.

Источники

• Атрибут novalidate
• Доступные формы - doka.guide
• doka - fetch()
• 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. Что такое DOM?
2. Какие есть способы получения элементов из DOM?
3. Примеры методов у элементов DOM.
4. Что такое событие?
5. Как добавить обработчик события?
6. Назовите фазы жизненного цикла события.
7. Для чего нужен preventDefault()?
8. Почему требуется проверять данные на стороне клиента?
9. Какие атрибуты полей форм можно использовать для добавления ограничений?
10. Что делает атрибут novalidate для формы?
11. На базе чего построен Fetch API?
12. Какие есть свойства и методы у объекта Response?
13. Как получить данные из тела запроса?
14. Какие параметры у функции fetch?