Не срабатывает submit
Не понимаю, что делаю не так. Есть компонент с input`ом textarea:
interface TextAreaWithLimitProps {
placeholder: string;
errors: any;
register: any;
}
const TextAreaWithLimit = ({ placeholder, errors, register }: TextAreaWithLimitProps) => {
return (
<div className="modal__formItem">
<textarea
{...register("title")}
rows={1}
className="modal__textArea"
placeholder={placeholder}
/>
<span className="modal__textArea-limit">{errors.title?.message}</span>
</div>
);
};
export default TextAreaWithLimit;
И есть компонент с формой:
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import cardImg from "../../img/cardImg2.png";
import TextAreaWithLimit from "../../components/TextAreaWithLimit/TextAreaWithLimit";
interface UserSubmitForm {
title: string;
}
const ModalEditCard = () => {
const validationSchema = Yup.object().shape({
title: Yup.string()
.required("Поле обязательно для заполнения")
.max(50, "Заголовок не более 50 символов")
});
const {
register,
handleSubmit,
formState: { errors }
} = useForm<UserSubmitForm>({
resolver: yupResolver(validationSchema),
mode: "onSubmit",
reValidateMode: "onChange",
defaultValues: {title: "тест"},
});
const onSubmit = (data: UserSubmitForm) => {
console.log(JSON.stringify(data, null, 2));
};
return (
<form className="modal__form" onSubmit={handleSubmit(onSubmit)}>
<div className="modal__body">
<div className="modal__info">
<TextAreaWithLimit
placeholder={"Заголовок"}
errors={errors}
register={register}
/>
</div>
<input type="submit" />
<div className="modal__img">
<img src={cardImg} alt="" />
</div>
</div>
</form>
);
};
export default ModalEditCard;
Валидация вроде бы работает, но submit не срабатывает! В консоли ничего. Не могу понять, что не так.
Ответы (1 шт):
Автор решения: elarri
→ Ссылка
Все было очень просто! Схема validationSchema ДОЛЖНА полностью соответствовать количеству iput в форме. У меня это правиль не соблюдалось, отсюда проверка isValid = false. Сейчас все работает