# 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).