# trigger

> Manually trigger validation for one field, a list of fields, or the entire React Hook Form without submitting.

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

## `trigger:` [UseFormTrigger](https://react-hook-form.com/ts#UseFormTrigger)

Manually triggers form or input validation. This method is also useful when you have dependent validation (input validation depends on another input's value). `trigger` returns `Promise<boolean>`, resolving `true` when the targeted field(s) pass validation and `false` otherwise.

### Props

---

| Name        | Type                           | Description                                                                                                                                                                                                                                    | Example                                  |
| ----------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
| name        | `undefined` | Triggers validation on all fields.                                                                                                                                                                                                             | `trigger()`                              |
|             | `string`    | Triggers validation on a specific field value by **name**                                                                                                                                                                                      | `trigger("yourDetails.firstName")`       |
|             | `string[]`  | Triggers validation on multiple fields by **name**.                                                                                                                                                                                            | `trigger(["yourDetails.lastName"])`      |
| shouldFocus | `boolean`   | _(since v7.7.0)_ Focuses the input when an error is set. This only works when the input's reference is registered, it will not work for custom register as well.                                                                      | `trigger('name', { shouldFocus: true })` |
| shouldTouch | `boolean`   | _(since v7.87.0)_ Marks the targeted field(s) as touched, regardless of the validation result. Useful for validating and touching a field (or the whole form) without reaching for `setValue`'s `shouldTouch` option as a workaround. | `trigger('name', { shouldTouch: true })` |

> **Important: Rules**
>
> Render-optimization isolation only applies when you target a single field by passing a `string` name. Passing an `array` of names, or calling `trigger()` with no arguments, re-renders the entire form state.
>

### Examples

---

**TS**

[Open in CodeSandbox](https://codesandbox.io/s/react-hook-form-v6-ts-triggervalidation-forked-xs7hl)

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

type FormInputs = {
  firstName: string
  lastName: string
}

export default function App() {
  const {
    register,
    trigger,
    formState: { errors },
  } = useForm<FormInputs>()

  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <button
        type="button"
        onClick={() => {
          trigger("lastName")
        }}
      >
        Trigger
      </button>
      <button
        type="button"
        onClick={() => {
          trigger(["firstName", "lastName"])
        }}
      >
        Trigger Multiple
      </button>
      <button
        type="button"
        onClick={() => {
          trigger()
        }}
      >
        Trigger All
      </button>
    </form>
  )
}
```

**JS**

[Open in CodeSandbox](https://codesandbox.io/s/react-hook-form-v6-triggervalidation-forked-8w9tn)

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

export default function App() {
  const {
    register,
    trigger,
    formState: { errors },
  } = useForm()

  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <button
        type="button"
        onClick={async () => {
          const result = await trigger("lastName")
          // const result = await trigger("lastName", { shouldFocus: true }); allowed to focus input
        }}
      >
        Trigger
      </button>
      <button
        type="button"
        onClick={async () => {
          const result = await trigger(["firstName", "lastName"])
        }}
      >
        Trigger Multiple
      </button>
      <button
        type="button"
        onClick={() => {
          trigger()
        }}
      >
        Trigger All
      </button>
    </form>
  )
}
```

### Video

---

The following video explains `trigger` API in detail.

[Watch on YouTube](https://www.youtube.com/watch?v=-bcyJCDjksE)

### Tips

---

- In a multi-step form, validate only the current step's fields before going to the next step:

  ```javascript
  const onNext = async () => {
    const isStepValid = await trigger(["firstName", "lastName"], {
      shouldFocus: true,
    })
    if (isStepValid) setStep((step) => step + 1)
  }
  ```

- For fields that depend on each other, such as `password` and `confirmPassword`, use the [`deps`](https://react-hook-form.com/docs/useform/register#options) option of `register`. You do not need to call `trigger` in an `onChange`.
- Use `trigger("name", { shouldTouch: true })` to show an error for a field that the user skipped, without changing its value.