Как я могу использовать yup validationSchema с формой response-hook?
Я использую библиотеку response-hook-form и да, чтобы проверить поля ввода:
const { handleSubmit, register, errors } = useForm({
mode: 'onBlur',
validationSchema: Yup.object({
name: Yup.string().max(6, 'Max 6 chars').required('Required boy'),
pass: Yup.string().min(6, 'Min 6 chars').required('Required boy')
})
});
const submit = (e) => {
alert(e.name + ' ' + e.pass);
};
return (
<div className="App">
<form onSubmit={handleSubmit(submit)}>
<input id="name" type="text" name="name" ref={register} />
{errors.name && <div>{errors.name.message}</div>}
<input id="pass" type="password" name="pass" ref={register} />
{errors.pass && <h3>{errors.pass.message}</h3>}
<button type="submit">Submit</button>
</form>
</div>
);
Он не выдает ошибку в консоли и предупреждает, когда я нажимаю кнопку отправки, но проверка вообще не работает.
Я ожидаю, что сообщение об ошибке появится при касании ввода, когда значение меньше или больше требуемого.
Как я могу правильно использовать yup с формой response-hook?
3 ответа
Решение
Вы можете использовать последнюю версию, не понижая ее до 4.9.8.
Документация находится в предварительном разделе формы реагирования на ловушку в разделе «Пользовательский хук с преобразователем» https://react-hook-form.com/advanced-usage .
мой пример кода ниже:https://codesandbox.io/s/react-hook-form-yup-material-ui-8ino9
phone: yup.string().length(11,'11 digit require').required().label('Phone'),