Формы и валидация

[rqrqrqrq]

No description provided.

[agolomazov-4xxi]

https://www.youtube.com/watch?time_continue=136&v=yNiJkjEwmpw - туториал по работе с formik и yup

[abazhenov-4xxi]

DRAFT

Примерный "идеальный" флоу валидации форм:

1.0 Пользователь открыл форму.

• все инпуты без ошибок, обязательный поля помечены каким-либо образом (звездочка у лейбла например)
• Кнопка отправки активна.

2.0 Пользователь ввел корректные данные и нажал кнопку отправки.

• Кнопка отправки неактивна.
• поля формы нельзя изменить.
• Показан индикатор отправки

3.0 Пользователь ввел некорректные данные и нажал кнопку отправки.

• Кнопка отправки активна.
• Поля с ошибкой визуально выделяются, рядом с ним выводятся описания ошибок.
• Фокус перемещается в первое невалидное поле

3.1 Пользователь меняет некорректные данные

• TODO описать флоу скрытия ошибки при редактировании

4.0 Пользователь прошел фронтенд вализацию и отправил форму, на сервере не произошло ошибок.

• форма успешно отправлена
• показан следующий шаг (сообщение об успешной отправке например) или форма снова становиться доступной для редактирования и кнопка отправки активна.

5.0 Пользователь прошел фронтенд вализацию и отправил форму, но на сервере произошла ошибка валидации (например такой емей уже существует)

• Форма становиться доступной для редактирования
• Кнопка отправки неактивна.
• Поля с ошибкой визуально выделяются, рядом с ним выводятся описания ошибок.

5.1 Пользователь изменяет поле с ошибкой.

• На первый евент изменения поля ошибка пропадает (при условии что фронтенд валидация тоже проходит без ошибок, например не введен некорректный емей адрес)
• Кнопка отправки становится активной.

6.0 Пользователь прошел фронтенд вализацию и отправил форму, но на сервере произошла ошибка (404, 500 и т.п.)

• Форма становиться доступной для редактирования
• Кнопка отправки активна.
• Пользователю выводится сообщение о произошедшей неизвестной ошибке.

Еще не дописал

[rqrqrqrq]

@abazhenov-4xxi Давай обсудим 3.0 подробнее. Я предполагаю, что если при клике на кнопку сабмита зафейлилась фронтовая валидация, нужно не блокировать кнопку, показать все сообщения и перевести фокус на первое невалидное поле. Любой клик по кнопке сабмита просто повторяет обычный пре-сабмит (полная валидация, показ ошибок, фокус на первую ошибку)

[rqrqrqrq]

TODO: рабочий пример такого интерфейса + пример реализации (несколько мб?)
NICE TO HAVE: описание почему нужно сделать так или иначе для каждого пункта (тк часто нужно отстаивать именно такой флоу перед продактами/кем либо)

[abazhenov-4xxi]

@rqrqrqrq согласен на на счет активной кнопки в 3.0