javascript - 是的，当联系人为空时，不会触发 useForm 验证错误

Question

我正在使用 react-hooks 和 yup 作为我的联系表单。我已经按预期添加了我的 yup 模式和错误边界，但是当我尝试使用空字段提交它时它们不会触发。空表格直接进入我不想要的数据库。为什么不触发？

我的联系方式代码如下:

import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { ErrorMessage } from "@hookform/error-message";
 
const schema = yup.object().shape({
  fullName: yup.string().required("Please enter your full name"),
  email: yup.string().required("Please enter your email"),
  select: yup
    .string()
    .oneOf(["webSolutions", "mobileSolutions", "devOps", "research", "uiux"])
    .required("Please choose one of our services"),
  message: yup.string().required("Message can not be left blank"),
});

const Contact = () => {
  const [fullName, setFullName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [selecttype , setSelectType ] = useState([]);

 
  const {
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    db.collection("contacts")
      .add({
        fullName: fullName,
        email: email,
        selecttype : selecttype ,
        message: message,
      })
      .then(() => {
        alert("message has been submitted");
      })
      .catch((error) => {
        alert(error.message);
      });
  setFullName("");
  setEmail("");
  setMessage("");
  setSelectType("");
  };

  return (
    <>
      <Container>
        <FormBg>
          <ImageBg>
            <Img src={Image} />
          </ImageBg>
        </FormBg>
        <FormWrap>
          <FormContent>
            <Form onSubmit={handleSubmit}>
              <Icon to="/">
                <img src={dLogo} />
              </Icon>
              <FormH1>Fill in your request details below</FormH1>
              <FormLabel value="fullName">
                Full Name <RequiredTag>*</RequiredTag>
              </FormLabel>
              <FormInput
                type="text"
                name="fullName"
                onChange={(e) => setFullName(e.target.value)}
              />
              <ErrorTag>
                <ErrorMessage errors={errors} name="fullName" />
              </ErrorTag>

              <FormLabel value="email">
                Email <RequiredTag>*</RequiredTag>
              </FormLabel>
              <FormInput
                type="email"
                name="email"
                placeholder="example@email.com"
                onChange={(e) => setEmail(e.target.value)}
              />
              <ErrorTag>
                <ErrorMessage errors={errors} name="email" />
              </ErrorTag>
              <FormLabel value="services">
                What would you wants to do for you?
                <RequiredTag>*</RequiredTag>
              </FormLabel>
              <select
                onChange={(e) => {
                  const selectedOption = e.target.value;
                  setSelectType (selectedOption);
                  console.log(selectedOption);
                }}
              >
                <option>Select ...</option>
                <option value="webSolutions">Web Solutions</option>
                <option value="mobileSolutions">Mobile Solutions</option>
                <option value="devOps">DevOps Solutions</option>
                <option value="research">Research Assistance</option>
                <option value="uiux">UI/UX Design</option>
              </select>
            
              <ErrorTag>
                <ErrorMessage errors={errors} name="select" />
              </ErrorTag>
              <FormLabel value="message">
                Message <RequiredTag>*</RequiredTag>
              </FormLabel>
              <textarea
                name="message"
                placeholder="Tell us more about your request like bugdets, questions and more"
                onChange={(e) => setMessage(e.target.value)}
              />
              <ErrorTag>
                <ErrorMessage errors={errors} name="message" />
              </ErrorTag>
              <FormButton type="submit">Submit Request</FormButton>
              <Text>We respond within 48 hours😉</Text>
            </Form>
          </FormContent>
        </FormWrap>
      </Container>
    </>
  );
};

export default Contact;```

Answer 1

您还可以在 yup.object().shape({...}) 上设置 .required()，这将确保该对象不会验证时为空。

它看起来像这样:

const schema = yup.object().shape({
  // Your shape fields
}).required(); // -> here is where you add it

编辑

您也没有使用 React Hook Form 的提交包装器，这可能就是为什么即使存在错误也会提交表单的原因。

const { handleSubmit } = useForm();

const yourSubmitHandler = () => {
  // ...
};

return (
  <Form onSubmit={handleSubmit(yourSubmitHandler)}>
    {/* Rest of the form  */}
  </Form>
);