Валидация многоэтапной React-формы

Я пытаюсь создать многоэтапную форму ценообразования React. Я уже создал форму и ценовую часть.

Но пользователь может просто избежать вопроса и перейти к следующей части, просто нажав кнопку «Далее». Итак, мне нужна какая-то проверка, которая не позволит пользователю перейти к следующему шагу, выполнив предыдущий шаг. Кажется, понятия не имею, как его создать.

  • Шаг 1. Проверка переключателя (проверка не требуется)

  • Шаг 2: заполнение страны, города, почтового индекса (требуется проверка)

  • Шаг 3: заполнение адреса электронной почты (требуется проверка)

Я создал рабочую песочницу кода. Вот ссылка < / а>.


reactjs javascript react-hooks react-hook-form react-forms
person Community    schedule 20.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Введите новый canContinueToNextStage и установите его true или false в соответствии с вашей логикой. Затем используйте его, чтобы отключить следующую кнопку, или в onClick, если вы хотите разрешить нажатие, но не переходить на следующую страницу.

person Lior Pollak    schedule 20.01.2021
comment
К сожалению, я не знаю, какова ваша бизнес-логика, поэтому без нее сделать это довольно сложно. Если вы можете уточнить, я мог бы написать набросок POC. - person Lior Pollak; 22.01.2021