如何在用户点击提交按钮前触发react-hook-form中的yup验证？

要实现提交表单前实时显示字段错误，只需调整useForm的验证触发模式，确保字段错误状态能实时同步到MUI组件中。

1. 修改useForm初始化配置 #

在useForm中添加mode选项，指定验证触发的时机：

const {
    register,
    handleSubmit,
    formState: { errors, isValid },
} = useForm<SignUpFormValues>({
    resolver: yupResolver(signUpSchema(data ? data.usernames : [])),
    // 选择合适的验证触发模式
    mode: "onChange", // 输入内容变化时立即验证
    // 或者 mode: "onBlur" // 字段失去焦点时验证
    // 或者 mode: "all" // 同时支持 onChange、onBlur、onSubmit 触发验证
})

各模式说明： #

• onChange：用户每输入一个字符都会触发对应字段的验证，适合需要实时反馈的场景
• onBlur：用户离开字段（点击其他区域）时触发验证，减少频繁验证的性能消耗
• 两种模式都能让错误在提交前显示，根据产品需求选择即可

2. 保留现有MUI组件错误显示逻辑 #

你当前的TextField配置已经正确关联了errors状态，无需额外修改：

<TextField
    label="First Name"
    {...register('firstName')}
    error={Boolean(errors.firstName)}
    helperText={errors.firstName ? errors.firstName.message : ''}
/>

只要errors.firstName存在（验证不通过），组件就会自动显示错误样式和提示文本。

3. 可选：单独控制特定字段的验证时机 #

如果需要对某个字段设置不同的验证触发逻辑，可以在register时单独配置：

{...register('username', { trigger: 'onBlur' })}

这会覆盖全局的mode设置，仅该字段在失去焦点时触发验证。

内容的提问来源于stack exchange，提问作者YinonTsadik