javascript - 是的,当联系人为空时不会触发 useForm 验证错误
问题描述
我正在为我的联系表格使用 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;```
解决方案
您还可以设置.required()
您的yup.object().shape({...})
which 将确保验证时对象不会为空。
它看起来像这样:
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>
);
推荐阅读
- google-cloud-platform - GCP 中的自定义组织政策中的值无效
- android - “计时器已取消”,但在打开新片段时恢复?
- python - python selenium cronjob - pam_unix(cron:session):会话为用户关闭
- android - 如何将图像定位在大圆形图像的边缘?
- android - 当 GET 返回 null 而不是 List 时,KotlinxSerializer 出现 NullPointerException
- c++ - 如果控制台输入是一个大矩阵,程序会挂起,但从文件输入时可以完美运行
- php - 如何在php中使用内连接
- webhooks - 使用 Zapier 将 Google Form Leads 传递给 Custom CRM
- c# - 如何在 Windows 窗体中加载?(C#)
- google-cloud-platform - 从 Cloud Storage 存储分区下载多个文件