Skip to content

trigger

Manually trigger validation without submitting.

trigger: 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

NameTypeDescriptionExample
nameundefinedTriggers validation on all fields.trigger()
stringTriggers validation on a specific field value by nametrigger("yourDetails.firstName")
string[]Triggers validation on multiple fields by name.trigger(["yourDetails.lastName"])
shouldFocusbooleanSince 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 })
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:
CodeSandbox TS
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>
  )
}
CodeSandbox JS
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.

Thank you for your support

If you find React Hook Form to be useful in your project, please consider starring and supporting it.

Edit