Не срабатывает 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. Сейчас все работает

→ Ссылка