React Hook Form：触发表单验证前如何检查单个字段有效性

问题场景与代码 #

我有以下React Hook Form结合Zod的表单代码：

const formFieldsSchema = z.object({
  fieldA: z.string().min(1, "field required"),
  fieldB: z.string().min(1, "field required"),
})

type FormFieldSchemaType = z.infer<typeof formFieldsSchema>

const MyForm = () => {

  const {register, formState} = useForm<FormFieldSchemaType>({
    mode: "onTouched",
    resolver: zodResolver(formFieldSchema)
  })

  // 点击按钮时，希望在fieldA有效时执行后续逻辑
  const onButtonClick = () => {
    // 当前问题：用户未触碰fieldA时，formState.errors.fieldA不存在，会误判为有效
    const fieldAIsValid = formState.errors.fieldA 

    if(fieldAIsValid) {
      // 执行后续流程
    }
  }

  return <>
    <input {...register("fieldA")}/>
    <p>{formState.errors.fieldA?.message}</p>
    <input {...register("fieldB")}/>

    <button onClick={onButtonClick}>Do something</button>
  </>
}

核心需求 #

在不提前触发UI验证错误（比如不使用trigger或修改mode）的前提下，准确判断单个字段（如fieldA）是否符合Zod校验规则，即使该字段还未被用户触碰。

已尝试!formState.getFieldState("fieldA").invalid，但未触碰时会返回true（误判为有效），不符合需求。

解决方案 #

方法1：直接用Zod校验字段当前值 #

通过React Hook Form的getValues获取字段当前值，再用Zod的单独字段校验规则验证：

const {register, formState, getValues} = useForm<FormFieldSchemaType>({
  mode: "onTouched",
  resolver: zodResolver(formFieldSchema)
})

const onButtonClick = () => {
  const fieldAValue = getValues("fieldA");
  // 单独提取fieldA的校验规则进行验证
  const fieldAResult = formFieldsSchema.shape.fieldA.safeParse(fieldAValue);
  const fieldAIsValid = fieldAResult.success;

  if(fieldAIsValid) {
    // 执行后续流程
  }
}

这种方式完全不会触发表单的UI错误提示，只是单独做校验逻辑，完美匹配需求。

方法2：使用trigger但临时控制错误显示（可选） #

如果一定要用RHF的API触发校验，可以通过临时缓存并恢复错误状态来避免UI提示，但相对繁琐：

const {register, formState, trigger} = useForm<FormFieldSchemaType>({
  mode: "onTouched",
  resolver: zodResolver(formFieldSchema)
})

const onButtonClick = async () => {
  // 缓存原有错误状态
  const originalFieldAError = formState.errors.fieldA;
  // 触发fieldA校验但不聚焦
  const fieldAIsValid = await trigger("fieldA", {shouldFocus: false});
  // 恢复原有错误，避免UI显示校验结果
  formState.errors.fieldA = originalFieldAError;

  if(fieldAIsValid) {
    // 执行后续流程
  }
}

这种方法需要手动处理错误状态，不如方法1简洁可靠。

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