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

如何解决是的，当联系人为空时，不会触发 useForm 验证错误

我正在使用 react-hooks 和是的我的联系表格。我已经按预期添加了我的 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="[e-mail]"
                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;```

解决方法

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

它看起来像这样：

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>
);

,

我找到了答案。由于我使用 react-hooks useForm 和 yup 来验证我的表单，因此我必须使用表单中捕获的数据，方法是将其传递给我的 firebase db 的 onSubmit 函数，如下所示：

const submenutitle = document.querySelector('.submenutitle');

这很完美，我希望它适用于任何可能使用 react-hook useForm 和 yup 进行验证的人。