如何使用react-hook-form-mui库修改表单验证错误提示信息？

你遇到的问题是因为react-hook-form-mui的TextFieldElement封装了Material-UI组件，同时你额外添加的required属性触发了原生组件的默认验证，导致自定义消息被覆盖。以下是两种可行的解决方法：

方法一：调整TextFieldElement的props绑定错误信息 #

移除组件上的required属性，手动将react-hook-form的错误状态和消息绑定到组件的error和helperText属性上：

export default function FormDialog({ showDialog, closeDialog }) {
    const onSubmit = (data) => {
        console.log(data)
    }

    const onError = (error) => {
        console.log(error)
    }

    const { register, formState: { errors } } = useForm()

    return (
        <div>
            <Dialog
                open={showDialog}
                onClose={closeDialog}
                maxWidth={'xl'}
            >
                <FormContainer
                    onSuccess={onSubmit}
                    onError={onError}
                >
                    <DialogTitle>ADD Item</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            Please fill form fields
                        </DialogContentText>
                        <div>
                            <TextFieldElement
                                {...register("NAME", { 
                                    required: "Error message" // 自定义必填错误消息
                                })} 
                                sx={{ width: '100px' }}
                                className={styles.formField}
                                name="NAME"
                                label="Name"
                                error={!!errors.NAME} // 绑定错误状态
                                helperText={errors.NAME?.message} // 绑定自定义错误文本
                            />
                        </div>
                    </DialogContent>
                    <DialogActions>
                        <Button type={'submit'} variant={'contained'} color={'primary'}>
                            Submit
                        </Button>
                        <Button onClick={closeDialog}>Cancel</Button>
                    </DialogActions>
                </FormContainer>
            </Dialog>
        </div>
    );
}

方法二：使用Controller组件（推荐复杂场景） #

react-hook-form的Controller组件能更好地控制封装后的表单组件，确保验证规则和错误消息正确传递：

import { Controller } from 'react-hook-form';

export default function FormDialog({ showDialog, closeDialog }) {
    const onSubmit = (data) => {
        console.log(data)
    }

    const onError = (error) => {
        console.log(error)
    }

    const { control, formState: { errors } } = useForm()

    return (
        <div>
            <Dialog
                open={showDialog}
                onClose={closeDialog}
                maxWidth={'xl'}
            >
                <FormContainer
                    onSuccess={onSubmit}
                    onError={onError}
                >
                    <DialogTitle>ADD Item</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            Please fill form fields
                        </DialogContentText>
                        <div>
                            <Controller
                                name="NAME"
                                control={control}
                                rules={{ required: "Error message" }}
                                render={({ field, fieldState: { error } }) => (
                                    <TextFieldElement
                                        {...field}
                                        sx={{ width: '100px' }}
                                        className={styles.formField}
                                        label="Name"
                                        error={!!error}
                                        helperText={error?.message}
                                    />
                                )}
                            />
                        </div>
                    </DialogContent>
                    <DialogActions>
                        <Button type={'submit'} variant={'contained'} color={'primary'}>
                            Submit
                        </Button>
                        <Button onClick={closeDialog}>Cancel</Button>
                    </DialogActions>
                </FormContainer>
            </Dialog>
        </div>
    );
}

关键说明 #

• 移除TextFieldElement上的required属性，避免Material-UI原生验证覆盖自定义消息
• 通过error和helperText属性显式绑定react-hook-form的错误状态与消息，确保组件正确显示自定义提示
• 两种方法都能让onError回调中输出你定义的"Error message"，而非默认文本

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