clearErrors

Manually clear validation errors on fields.

View Markdown Open in ChatGPT Open in Claude

</> `clearErrors:` UseFormClearErrors

This function can manually clear errors in the form.

Props

Type	Description	Example
undefined	Remove all errors.	`clearErrors()`
string	Remove single error.	`clearErrors("yourDetails.firstName")`
string[]	Remove multiple errors.	`clearErrors(["yourDetails.lastName"])`

undefined: reset all errors

string: reset the error on a single field or by key name.

register("test.firstName", { required: true })
register("test.lastName", { required: true })
clearErrors("test") // will clear both errors from test.firstName and test.lastName
clearErrors("test.firstName") // for clear single input error

string[]: reset errors on the given fields

RULES

This method does not affect the validation rules attached to inputs and does not impact formState.isValid.

Examples

CodeSandbox ^TS

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

type FormInputs = {
  firstName: string
  lastName: string
  username: string
}

const App = () => {
  const {
    register,
    formState: { errors },
    handleSubmit,
    clearErrors,
  } = useForm<FormInputs>()

  const onSubmit = (data: FormInputs) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <input {...register("username", { required: true })} />
      <button type="button" onClick={() => clearErrors("firstName")}>
        Clear First Name Errors
      </button>
      <button
        type="button"
        onClick={() => clearErrors(["firstName", "lastName"])}
      >
        Clear First and Last Name Errors
      </button>
      <button type="button" onClick={() => clearErrors()}>
        Clear All Errors
      </button>
      <input type="submit" />
    </form>
  )
}

CodeSandbox ^JS

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

const App = () => {
  const {
    register,
    formState: { errors },
    handleSubmit,
    clearErrors,
  } = useForm()
  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <input {...register("username", { required: true })} />
      <button type="button" onClick={() => clearErrors("firstName")}>
        Clear First Name Errors
      </button>
      <button
        type="button"
        onClick={() => clearErrors(["firstName", "lastName"])}
      >
        Clear First and Last Name Errors
      </button>
      <button type="button" onClick={() => clearErrors()}>
        Clear All Errors
      </button>
      <input type="submit" />
    </form>
  )
}

Tips

Clear a server error as soon as the user starts to fix it:

<input
  {...register("email", {
    onChange: () => clearErrors("root.server"),
  })}
/>

clearErrors("root") clears every root error, for example root.server and root.network, because it removes everything under that path.
clearErrors does not re-validate. If a field is still invalid, its error comes back the next time validation runs. To check a field again right away, use trigger.

Troubleshooting

The error comes back after calling `clearErrors`

Why it happens

clearErrors removes the stored error, but it does not change the field value or its validation rules. The next blur, change, or submit validates the same invalid value and creates the error again.

Fix

Correct the value before clearing the error, or change the validation rule. To immediately check the current value again, call trigger("fieldName") instead of clearing the error.

`isValid` stays `false` after all errors are cleared

Why it happens

isValid is derived from validation, not from whether the errors object was manually emptied. Calling clearErrors does not run validation or make an invalid form valid.

Fix

Fix the invalid values and call trigger() if you need to recompute validity immediately.