#reactjs #react-hook-form #yup
Вопрос:
Я хочу иметь разные режимы проверки для разных входных данных. В настоящее время проверка формы использует 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>
Спасибо