Skip to content
React Hook Form
Star

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 })
shouldTouchbooleanSince 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 })
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.

Edit