Форма отправки данных, состоящая из 3 отдельных таба/шага формы, которые можно переключать между собой.

Описание

Форма состоит из 4 отдельных страниц с формами. На первом экране (главная страница) можно добавить информацию о пользователе/себе и по нажатию на кнопку "Начать" будет происходить переход на форму, состоящую из 3 шагов/табов. На этапе табов есть 2 кнопки "Далее" - для перехода к следующему шагу и "Назад" - для возвращения к предыдущему шагу. При переходе от таба к табу (в том числе возвращаясь на предыдущий) информация сохраняется. При переходе меняться роут.

Валидация полей форм выполнена на чистом JS (TS) без использования дополнительных библиотек. И на каждом шаге валидация выполнена по-разному, а именно на разные события (события 'blur', input', submit')

1. Главная страница - форма с вводом информации о пользователе/себе
2. Шаг/таб 1 - форма с вводом более подробной информацией о пользователе/себе
3. Шаг/таб 2 - форма с группой чекбоксов и радиокнопок и полем Advantages - количество которых можно изменять путем добавления/удаления
4. Шаг/таб 3 - форма с textarea

Нельзя перейти на следующий шаг путем изменения роута в адресной строке. На странице выводится сообщение: "Этот шаг не доступен. Вы не заполнили предыдущую форму"

Форма на главной странице:

Форма состоит из 3 полей ввода: Имя и Фамилия, Номер телефона, Email

В заголовке формы имеется надпись "Ваша Фамилия и Имя" и "ХХ" в кружочке (инициалы). При вводе в поле Имя и Фамилия введенные данные автоматически сразу отображаются в заголовке формы вместо надписи "Ваша Фамилия и Имя", а в поле "ХХ" отображаются инициалы (например Иванов Иван - "ИИ"). При вводе Имени или Фамилии с маленькой буквы - при потери фокуса с инпута - автоматически первые буквы Имени и Фамилии преобразуются в заглавные - как в инпуте, так и в заголовке формы.

Валидация полей:

1. все поля обязательны для заполнения
2. поле Имя и Фамилия:
   • не больше 30 символов
   • только кириллица! (ввод латиницы вомзожен, но сразу будет показана ошибка о необходимости ввода только кириллицы)
   • ввод цифр невозможен (при введении цифр символы вводится в поле не будут)
   • при вводе с Имени или Фамилии с маленькой буквы - при потери фокуса с инпута - автоматически первые буквы Имени и Фамилии преобразуются в заглавные
   • ошибка при невалидных данных появляется сразу при введение пользователем больше 30 символов или при введение латиницы (событие 'input')
3. поле Номер телефона:
   • валидация на заполненость поля (ввод номера телефона полностью)
   • имеется маска телефона в формате "(+7) 999 999-99-99"
   • ошибка при неполном вводе телефона появляется при потери фокуса с инпута (событие 'blur') и исчезает при введении пользователем корректного значения (событие 'input')
4. поле Email:
   • валидация на соотвествие формату Email
   • ошибка при невалидном формате Email появляется при потери фокуса с инпута (событие 'blur') и исчезает при введении пользователем корректного формата (событие 'input')

Внизу формы кнопка "Начать":

• при валидных данных в полях по нажатию на кнопку происходит переход на форму, состоящую из 3 шагов/табов.
• при невалидных данных показывается ошибка 'Проверьте поля на корректность введенных данных' над кнопкой.

ТАБ/ШАГ 1:

Форма состоит из 4 полей ввода: Nickname, Name, Surname, Sex

Ошибки при невалидных данных в полях в данной форме появляются при нажатии на кнопку "Далее" внизу формы (то есть по событию 'submit').

Валидация полей:

1. все поля обязательны для заполнения
2. поле Nickname:
   • не больше 10 символов
   • возможен ввод любых символов (как кириллицы так и латиницы, цифр и другие символы)
3. поле Name:
   • не больше 20 символов
   • ввод только кириллицы (введение латиницы невозможно, то есть символы не будут вводится вообще, необходимо переключить язык!)
4. поле Surname:
   • аналогично полю Name
5. поле Sex:
   • селект с выпадающим списком с вариантами выбора: man и woman
   • обязательно для выбора

Внизу формы кнопка "Далее:

• при валидных данных в полях по нажатию на кнопку происходит переход на следующий шаг/таб.
• при невалидных данных показываются все невалидные ошибки (соответствующие всем невалидным полям) над кнопкой.
• соответствующая ошибка исчезают при изменении соотвествующего инпута (то есть по событию 'input').

ТАБ/ШАГ 2:

Форма состоит из 4 полей ввода: Advantages, группа чекбоксов Checkbox group, группа радиокнопок Radio group

Ошибки при невалидных данных в полях в данной форме появляются при нажатии на кнопку "Далее" внизу формы (то есть по событию 'submit'). Группа чекбоксов Checkbox group и группа радиокнопка Radio group кастомные (стилизованы).

Валидация полей:

1. все поля НЕобязательны для заполнения
2. поле Advantages:
   • ввод только кириллицы (введение латиницы невозможно, то есть символы не будут вводится вообще, необходимо переключить язык!)
   • есть возможность добавить дополнительные поля Advantages, а также удалять их (для этого есть соотвествующие кнопки)
3. группа чекбоксов Checkbox group:
   • есть 3 варианта выбора: Вариант 1, Вариант 2, Вариант 3
   • можно выбрать любое количество вариантов
4. группа радиокнопка Radio group:
   • есть 3 варианта выбора: Вариант 1, Вариант 2, Вариант 3
   • можно выбрать только 1 из вариантов

Внизу формы кнопка "Далее: - переход на следующий шаг/таб так как данная форма НЕбязательна к заполнению.

ТАБ/ШАГ 3:

Форма состоит из блока textarea

Валидация:

1. НЕобязательна для заполнения
2. максимально - 200 символов
3. при вводе в поле textarea в правом нижнем углу появляется надпись "Осталось N символов"

Внизу формы кнопка "Отправить":

• при нажатии открывается модальное окно со всеми данными, которые были введены в формах на всех шагах
• в модальном окне внизу кнопка "На главную" - при нажатии - переход на главную страницу со сбросом всех введеных данных в полях всех форм

Технологии

• Next.js
• React
• React Redux
• Redux Toolkit
• react-select
• react-input-mask
• TypeScript
• Sass