# clearErrors

> Manually clear validation errors for one field, an array of fields, or the entire React Hook Form without triggering re-validation.

Source: https://react-hook-form.com/docs/useform/clearerrors

## `clearErrors:` [UseFormClearErrors](https://react-hook-form.com/ts#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.

  ```javascript
  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

> **Important: Rules**
>
> - This method does not affect the validation rules attached to inputs and does not
>   impact <code>formState.isValid</code>.
>

### Examples

---

**TS**

[Open in CodeSandbox](https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx)

```tsx
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>
  )
}
```

**JS**

[Open in CodeSandbox](https://codesandbox.io/s/react-hook-form-v7-clearerrors-w5tl6)

```javascript
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:

  ```javascript
  <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`](https://react-hook-form.com/docs/useform/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")`](https://react-hook-form.com/docs/useform/trigger) 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()`](https://react-hook-form.com/docs/useform/trigger) if you need to recompute validity immediately.