React hook form Joi验证.发送后没有任何动作

Question

带有Joi验证的hook-form。我已经设置了所有的模式，并将其与我的表单完全相同，就像在文档中一样，但是在单击提交之后，除了移动到表单的顶部之外，没有任何动作，控制台没有错误，包括schema.validation的错误。有人有同样的问题吗??如果有任何建议，我将感激不尽
模式验证器

export const JoiSchema = Joi.object({
login: Joi.string().required().external(validateLogin),
password: joiPassword
.string()
.minOfNumeric(1)
.minOfUppercase(1)
.minOfLowercase(1)
.min(8)
.max(16)
.noWhiteSpaces()
.required(),
passwordConfirmation: Joi.any().equal(Joi.ref("password")),
name: Joi.string()
.regex(/^[A-ZĄĆĘŁŃÓŚŹŻ]+[a-ząćęłńóśźż][^s,.\/-_]{3,19}$/)
.required(),
lastName: Joi.string()
.regex(/^[A-ZĄĆĘŁŃÓŚŹŻ]+[a-ząćęłńóśźż][^s,.\/_]{3,30}$/)
.required(),
})

connect to useForm

const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: joiResolver(JoiSchema),
});

注册输入

<input
name="firstname"
{...register("firstname")}
type="text"
className="form-control"
/>

在加入schemvalidation之前，我已经console .log了所有字段，并且我在console中有它们，并且它们被正确注册了。

Answer 1

首先确保jo缺血性和表单中的所有名称都是正确的如果缺少任何字段，它将在该字段中生成错误，但不会在任何地方显示。并尝试使用Controller from react hook form

的例子:

<label
htmlFor="name"
className="block uppercase tracking-wide text-gray-700 text-xs font- 
bold mb-1 mt-2"
>
Name
</label>
<Controller
name="name"
control={control}
defaultValue=""
render={({ field, fieldState: { error } }) => (
<>
<input
{...field}
id="name"
type="text"
className={`appearance-none block w-full bg-gray-200 text-gray- 
700 border ${
error?.message ? "border-red-800" : "border-red-800"
} rounded py-3 px-4 leading-tight focus:outline-none focus:bg- 
white`}
/>
{error?.message && (
<span className="text-red-500 text-xs italic">
{error?.message}
</span>
)}
</>
)}
/>

FieldState将为特定字段提供错误，并使其成为可重用的组件，这将大大减少代码重复

类是"顺风"类