Валидация формы изменения данных с помощью yup
У меня есть личная страница пользователя в которой можно изменять данные например имя или дату рождения. Мне нужно свалидировать два инпута, пароль и повторите пароль, если оба инпута пусты то он должен сабмитеться если в каком-то из них есть какой-то символ то должна срабатывать валидация
const ProfileUser = ({ userData }: IProfileUser) => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<Inputs>({
defaultValues: {
fullName: userData.name,
email: userData.email,
phone: userData.phone,
date: userData.date,
},
resolver: yupResolver(changeDataUserSchema),
});
const onSubmit: SubmitHandler<Inputs> = data => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<p className="text-[14px]">Ваш профиль</p>
<Title className="text-[32px] font-extrabold mb-3">Базовые настройки</Title>
<div className="mb-10">
<p className="text-[13px] mb-4 font-bold">изменение пароля</p>
<Input
{...register('password')}
className="transition rounded py-6 px-5 mb-2"
placeholder="Новый пароль"
type="password"
/>
<Input
{...register('repeatPassword')}
className="transition rounded py-6 px-5 mb-2"
placeholder="Повторите новый пароль"
type="password"
/>
</div>
<Button type="submit" variant="blue">
Редактировать
</Button>
</form>
);
};код Yup
export const changeDataUserSchema = yup.object().shape({
fullName: yup.string().min(4, AppErrors.minLengthName),
date: yup.string(),
phone: yup.string().min(8, AppErrors.minLengthName),
email: yup.string().email(AppErrors.InvalidEmail),
password: yup
.string()
.min(8, AppErrors.minLength)
.matches(
/^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[a-zA-Z!#$%&? "])[a-zA-Z0-9!@#$%&?]{6,20}$/,
AppErrors.InvalidPassword
),
repeatPassword: yup.string().oneOf([yup.ref('password')], 'Пароли не совпадают'), // Сравнение с полем password
});