React-Hook-Form：输入为空时如何不显示错误

Question

一旦组件被触摸，然后用户清除输入，默认行为是错误继续显示。如何做到在触摸输入后清除输入时错误消失？

下面的代码摘自文档

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, formState: { errors }, handleSubmit } = useForm();
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      {errors.firstName?.type === 'required' && "First name is required"}
      
      <input {...register("lastName", { required: true })} />
      {errors.lastName && "Last name is required"}
      
      <input type="submit" />
    </form>
  );
}

Answer 1

您的验证规则检查字段是否为必填字段，因此如果您希望在字段为空时不出现错误，这意味着您只是不想在那个时候显示验证结果。

您可以选择何时执行验证并显示错误并给出 2 个选项 useForm():

mode：这定义了第一次执行验证的时间。默认情况下，它是在单击提交按钮时而不是之前执行的。
reValidateMode：这定义了第一次执行验证的时间。 默认情况下，它在更改时执行。这意味着在第一次验证后，每次输入一个字符时，错误都会出现或消失，具体取决于每个字段的有效状态。

因此，您可以通过提供选项 {reValidateMode: "onSubmit"} 来决定始终在提交时进行验证，并使用 clearErrors 在更改时重置错误。

function App() {
  const {
    register,
    formState: { errors },
    handleSubmit,
    clearErrors
  } = useForm({ reValidateMode: "onSubmit" });
  const onSubmit = () => null;
  const firstName = register("firstName", { required: true });
  const lastName = register("lastName", { required: true });
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...firstName}
        onChange={(e) => {
          firstName.onChange(e);
          clearErrors("firstName");
        }}
      />
      {errors.firstName?.type === "required" && "First name is required"}

      <input
        {...lastName}
        onChange={(e) => {
          lastName.onChange(e);
          clearErrors("lastName");
        }}
      />
      {errors.lastName && "Last name is required"}

      <input type="submit" />
    </form>
  );
}

Here is a codesandbox for that.

您也可以通过在调用 clearErrors 之前检查字段的值来仅在字段为空时（而不是在每次字符更改时）重置错误，但我认为这不是很直观只有当字段实际格式不正确时，用户才能看到错误消失。

React-Hook-Form：输入为空时如何不显示错误

React-Hook-Form: How to show no error when input is blank

reactjs

react-hook-form