手动调用react-hook-form的trigger后自动校验失效，如何恢复输入时自动校验？

以下是手动使用trigger方法的演示示例（已知可通过handleSubmit实现，此处仅作演示）：

import { z } from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Button, Container, FormControl, FormHelperText, Stack, TextField } from '@mui/material'

const demoSchema = z.object({
  fieldA: z.string().min(2),
})

type DemoFields = z.infer<typeof demoSchema>

function App() {
  const {
    watch,
    trigger,
    register,
    formState: { errors },
  } = useForm<DemoFields>({ resolver: zodResolver(demoSchema) })

  const submitHandler = (data: DemoFields) => console.log(data)

  const alt = async () => {
    const isOk = await trigger('fieldA')
    console.log(isOk)
    if (isOk) submitHandler(watch())
  }

  return (
    <Container>
      <Stack>
        <FormControl error={!!errors.fieldA}>
          <TextField label="Username" {...register('fieldA')} />
          <FormHelperText>{errors.fieldA?.message}</FormHelperText>
        </FormControl>
        <Button onClick={alt} variant="contained">
          Submit!
        </Button>
        <pre>{watch('fieldA')}</pre>
      </Stack>
    </Container>
  )
}

export default App

问题场景 #

当在输入框中输入"h"并点击"Submit!"按钮时，会出现校验错误并显示错误提示，但输入正确内容时，错误提示不会自动消失，需要再次点击提交按钮才会清除。

问题 #

1. 使用trigger()是否会导致后续所有校验变为手动？该机制是否有相关文档说明？
2. 如何恢复react-hook-form的正常行为，使得输入正确内容时错误提示自动消失？

回答 #

问题1解答

调用trigger()不会导致后续所有校验变为手动。React Hook Form的校验行为由useForm配置中的mode选项控制（默认值为"onSubmit"），trigger()只是一个手动触发特定字段/所有字段校验的工具方法，仅执行单次校验操作，不会修改全局的校验模式。

官方文档明确说明，trigger()用于在自定义时机触发校验（比如用户完成某个交互后单独校验某个字段），不会影响框架原本的自动校验逻辑。

问题2解答

可以通过两种方式恢复自动清除错误提示的行为：

方案1：修改校验模式

在useForm初始化时配置mode选项，开启实时校验。比如设置为"onChange"（输入时自动校验）或"onBlur"（字段失去焦点时自动校验）：

const {
  watch,
  trigger,
  register,
  formState: { errors },
} = useForm<DemoFields>({ 
  resolver: zodResolver(demoSchema),
  mode: "onChange" // 可选值："onBlur" | "onChange" | "onSubmit" 等
})

这样用户输入正确内容时，字段会自动重新校验，错误提示会实时消失。

方案2：监听字段变化手动触发校验

如果想保持默认的"onSubmit"模式，可通过watch监听字段值变化，当字段存在错误时手动触发校验：

import { useEffect } from 'react';

// ... 其他代码

const fieldAValue = watch('fieldA');

useEffect(() => {
  // 仅当字段存在错误时，才重新触发校验
  if (errors.fieldA) {
    trigger('fieldA');
  }
}, [fieldAValue, errors.fieldA, trigger]);

当用户输入正确内容后，trigger()会重新校验字段并清除错误提示。

内容的提问来源于stack exchange，提问作者Islam Y-