Блог

Я хочу иметь разные режимы проверки для разных входных данных. В настоящее время проверка формы использует Yup с mode: "onTouched" помощью, но проблема в том , что этот режим применяется ко всем входным данным в форме.

Я создал демонстрационную версию с теми же принципами, чтобы продемонстрировать это: https://codesandbox.io/s/react-playground-forked-8qb0k?file=/Pokemon.js — если вы нажмете на любой из 2 входов, а затем откажетесь, отобразится ошибка (то есть, если проверка завершится неудачно). Я хочу, чтобы на одном из входов не было onTouched режима. Как этого можно достичь?

В настоящее время он настроен следующим образом:

   const schema = Yup.object().shape({
    name: Yup.string()
      .required("Required")
      .min(3, "Enter at least 3 characters"),
    test: Yup.string()
      .required("Required Test")
      .min(2, "Enter at least 2 characters")
  });
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors },
    trigger,
    setValue,
    watch,
    clearErrors
  } = useForm({
    resolver: yupResolver(schema),
    mode: "onTouched"
    // reValidateMode: "onChange"
  });
 

И форма:

 <form onSubmit={handleSubmit(onSubmit /*, onError*/)}>
        <input
          {...register("name", { required: true })}
          name="name"
          placeholder="Enter a pokemon"
          onChange={onNameChange}
        />
        {errors.name amp;amp; <p>{errors.name.message}</p>}
        <input
          {...register("test", { required: true })}
          name="test"
          placeholder="test"
        />
        {errors.test amp;amp; <p>{errors.test.message}</p>}
        <button type="submit" onClick={onSubmit}>
          Show Pokemon
        </button>
        {errors.namey amp;amp; <p>{errors.namey.message}</p>}
      </form>
 

Спасибо