trigger: (name?: string | string[]) => Promise<boolean>
Manually triggers form or input validation. This method is also useful when you have dependant validation (input validation depends on another input's value).
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 | Should focus the input during setting an error. This only works when the input's reference is registered, it will not work for custom register as well. | trigger('name', { shouldFocus: true }) |
Rules
Isolate render optimisation only applicable for targeting a single field name with string
as payload, when supplied with array
and undefined
to trigger will re-render the entire formState.
Examples
import React from "react";
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 explain trigger
API in detail.
Thank you for your support
If you find React Hook Form to be useful in your project, please consider to star and support it.