Блог

Моя форма реакции-крючка с 3 шагами

 return (
<section className="flex max-w-x">
  <form onSubmit={handleSubmit(onSubmit)} className="mx-auto my-0 w-2/5">
    <FirstStep
      show={formStep === 1}
      register={register}
      errors={errors}
      onNextClick={async () => {
        setFormStep((await trigger(['email', 'password', 'passwordConfirm'])) ? 2 : 1);
      }}
    />
    <SecondStep
      show={formStep === 2}
      register={register}
      errors={errors}
      onNextClick={async () => {
        setFormStep((await trigger(['firstname', 'lastname', 'middlename', 'typeClient', 'phone'])) ? 3 : 2);
      }}
      onBackClick={() => setFormStep(1)}
    />
    <ThirdStep
      show={formStep === 3}
      register={register}
      errors={errors}
      onBackClick={() => setFormStep(2)}
      isSubmitting={isSubmitting}
    />
  </form>
 </section>
);
 

и есть валидаторы yup для ввода данных по телефону и электронной почте

  email: email.test(
    'isUnique',
    translate('signupFormScheme.email_is_busy'),
    async (value) => !value || await AuthService.checkEmail(value) === true,
  ),
 phone: phone.test(
    'isUnique',
    translate('signupFormScheme.phone_is_busy'),
    async (value) => !value || await AuthService.checkPhone(value) === true,
  ).required(translate('signupFormScheme.phone_must_be_filled')),
 

Когда я нажимаю кнопку на первом шаге, да, начинаю проверку работы для ввода электронной почты, после этого я нажимаю кнопку на втором шаге и снова запускаю рабочие валидаторы для ввода электронной почты и телефона. А затем я снова нажимаю кнопку регистрации на последнем шаге и снова начинаю проверку работы для ввода электронной почты и телефона.

Почему да, это так? потому что я использую триггер(react-hook-форма) Спасибо за ответ