英文:
How can I combine min and max validation errors in React Hook Form?
问题
{errors.subject?.type === "required" && (
<p className="text-error" role="alert">
Subject is required
</p>
)}
{errors.subject?.type === "minLength" && (
<p className="text-error" role="alert">
minLength 2
</p>
)}
{errors.subject?.type === "maxLength" && (
<p className="text-error" role="alert">
maxLength 50 characters
</p>
)}
英文:
<input
{...register("subject", {
maxLength: 50,
minLength: 2,
required: true,
})}
disabled={isLoading}
id="subject"
autoComplete="on"
type="text"
placeholder="Subject"
className={`w-full ${errors.subject ? "outline-error" : ""}`}
/>
{errors.subject?.type === "maxLength" && (
<p className="text-error" role="alert">
maxLength 50 characters
</p>
)}
{errors.subject?.type === "minLength" && (
<p className="text-error" role="alert">
minLength 2
</p>
)}
{errors.subject?.type === "required" && (
<p className="text-error" role="alert">
Subject is required
</p>
)}
I want the min and max errors to be combined... when I try to combine it doesn't work as I wanted. It sometimes show both error or or does't show error . I want when user empty the field the required error should show and when user enter something in the field if it does not match the min and max length the min max error show
答案1
得分: 1
你在这方面做得很详细，就像是为每一个需求都创建了不同的 span。与其这样做，你可以这样：
首先，在 react-hook-form 中，从 useForm() 中获取 formState: { errors } 属性，像这样：
const { register, handleSubmit, reset, setValue, formState: { errors }, clearErrors } = useForm();
还要像这样导入 React-hook-form 中的 ErrorMessage 组件：
import { ErrorMessage } from "@hookform/error-message";
然后，你可以在需要的地方在输入框后面应用 ErrorMessage 组件，就像这样：
<input type="text" className="form-control"
{...register("subject", {
required: "* 输入主题",
minLength: {
value: 2,
message: "至少需要2个字符"
},
maxLength: {
value: 50,
message: "最多允许50个字符"
}
})} />
<ErrorMessage errors={errors} name="subject"
render={({ message }) => (
<span className="errorMessage">{message}</span>
)}
/>
在这里，你可以提供任何自定义消息，并且之后可以在 ErrorMessage 组件中解构它。
谢谢...！
英文:
You are going very long in this like you are making different different span for each and every requirement.
Instead of that you can do like this.
First take formState: { errors } attribute from useForm() in react-hook-form like this,
const { register, handleSubmit, reset, setValue, formState: { errors }, clearErrors } = useForm();
also import ErrorMessage Component from React-hook-form like this,
import { ErrorMessage } from "@hookform/error-message";
Then you can apply ErrorMessage component after input whenever you want like this...
<input type="text" className="form-control"
{...register("subject", {required : "* Enter subject ",
minLength:{
value:2,
message: "Minimum 2 Characters required"
},
maxLength: {
value:50,
message: "Max 50 is allowed"
}
} )} />
<ErrorMessage errors={errors} name="subject"
render={({message}) => (
<span className="errorMessage" >{message}</span>
)}
/>
Here you can give any custom message you want, and after you can de-structure in ErrorMessage component.
Thank you...!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论