Почему при отправке формы меняется способ проверки валидации?

Question

[frogqwetr]

У меня есть форма регистрации, в которой есть два поля от material ui, валидация происходит с помощью библиотеки react hook form. Проблема заключается в том, что до нажатия кнопки "Зарегистрироваться" валидация работает нормально в моде onBlur, но, когда я нажимаю кнопку, форма перестает работать в штатном режиме, она будто меняет мод onBlur на onChange, из - за этого вместо одного запроса на проверку пользователя(асинхронный метод, который находится в объекте validatorsFormRegistrationFieldLogin в предоставленном библиотекой react hook form методе validate) этот запрос отправляется на каждый введенный символ в поле.

Ниже картинка запросов до нажатия кнопки и после(запросы отправляются при добавление нового символа)




Компонент формы регистрации

import { Button, TextField } from "@mui/material";
import { useForm, Controller } from "react-hook-form";
import {
  validatorsFormRegistrationFieldLogin,
  validatorsFormRegistrationFieldPassword,
} from ...
interface FormRegistrationField {
  name: string;
  password: string;
}

const RegistrationForm: FC = () => {
  const dispatch = useDispatch();
  const { control, handleSubmit, reset, formState } =
    useForm<FormRegistrationField>({
      mode: "onBlur",
    });

  const testSubmit = (data: FormRegistrationField) => {
    console.log(data);
    reset();
  };

  return (
    <div className="registration-form">
      <form onSubmit={handleSubmit(testSubmit)}>
        <Controller
          name="name"
          rules={validatorsFormRegistrationFieldLogin}
          render={({ field, fieldState: { error } }) => (
            <TextField
              error={!!error?.message}
              helperText={error?.message}
              label="login"
              {...field}
              value={field.value || ""}
            />
          )}
          control={control}
        />
        <Controller
          name="password"
          shouldUnregister={true}
          rules={validatorsFormRegistrationFieldPassword}
          render={({ field, fieldState: { error } }) => (
            <TextField
              type="password"
              error={!!error?.message}
              helperText={error?.message}
              label="password"
              {...field}
              value={field.value || ""}
            />
          )}
          control={control}
        />
        <Button
          disabled={!formState.isValid || formState.isSubmitting}
          type="submit"
        >
          Зарегистрироваться
        </Button>
      </form>
    </div>
  );
};

Валидаторы для формы

const defaultRequriedMessage = "Поле должно быть заполнено"

const checkIfSuchUserExists = async (nameUser: string): Promise<boolean> => {
    console.log("request users")
    const receviedUser = await getUserInformation(nameUser)
    return !!receviedUser
}

export const validatorsFormRegistrationFieldLogin:  Omit<RegisterOptions, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'> = {
    required: defaultRequriedMessage,
    validate: async (value: string) => {
        const isUserWithThisNameFound = await checkIfSuchUserExists(value)
        if (isUserWithThisNameFound){
            return "Пользователь с таким именем уже существует"
        }
        return true
    }
}

export const validatorsFormRegistrationFieldPassword: Omit<RegisterOptions, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'> = {
    required: defaultRequriedMessage,
}

Answer 1

[frogqwetr]

Для тех, кто, возможно, столкнется со схожей проблемой. Я нашел решение : указывайте в опциях, которые передаете в хук еще одно свойство - "reValidateMode".

const { control, handleSubmit, reset, formState } =
    useForm<FormRegistrationField>({
      mode: "onBlur", 
      reValidateMode: "onBlur", // вот это свойство нужно добавить
    });