Ручной trigger валидации

Ручная валидация в связке с YupResolver в экосистеме React Hook Form используется тогда, когда автоматические стратегии проверки (onChange, onBlur, onSubmit) не покрывают требуемую бизнес-логику или когда необходимо управлять моментом запуска проверки явно, вне стандартного жизненного цикла формы. Такой подход особенно важен при сложных формах, где данные должны проверяться поэтапно, зависимо от состояния интерфейса или внешних событий.

В основе механизма лежит функция trigger, предоставляемая React Hook Form. При использовании @hookform/resolvers/yup Yup-схема остается источником истины для валидации, а resolver лишь адаптирует результаты работы Yup к внутреннему формату ошибок RHF. Ручной запуск валидации не изменяет саму схему и не требует дополнительных конфигураций resolver-а, но влияет на то, когда именно происходит вычисление ошибок.

При вызове trigger происходит принудительная валидация выбранных полей или всей формы. В этот момент React Hook Form:

  • извлекает текущее состояние значений формы;
  • передает их в resolver (в данном случае YupResolver);
  • Yup выполняет синхронную или асинхронную проверку по схеме;
  • результат преобразуется в структуру ошибок RHF;
  • состояние формы обновляется, включая errors, isValid, isDirty и связанные флаги.

Важно, что YupResolver не хранит состояние между вызовами. Каждая ручная валидация — это независимый прогон схемы, полностью основанный на текущих значениях формы.

Базовое использование trigger

Ручной запуск валидации применяется через API формы:

const {
  register,
  trigger,
  formState: { errors }
} = useForm({
  resolver: yupResolver(schema),
  mode: "onChange"
});

Вызов валидации всей формы:

await trigger();

Валидация конкретного поля:

await trigger("email");

Валидация нескольких полей:

await trigger(["email", "password"]);

Возвращаемое значение — булево, отражающее успешность проверки выбранного набора полей.

Асинхронная природа и влияние Yup

Yup поддерживает асинхронные схемы через validate с промисами, что напрямую влияет на поведение trigger. При наличии асинхронных правил (например, проверка уникальности email через API) trigger становится ожиданием завершения всех промисов внутри схемы.

const result = await trigger("email");

Если хотя бы одно правило возвращает ошибку или отклоненный промис, результат будет false, а соответствующее поле попадет в объект errors.

Частичная валидация и инкрементальный контроль

Одно из ключевых применений ручного trigger — частичная проверка формы. Это позволяет строить пошаговые интерфейсы, где пользователь продвигается дальше только после успешной проверки конкретного блока данных.

Пример сценария:

  • шаг 1: личные данные;
  • шаг 2: контактная информация;
  • шаг 3: подтверждение.

В каждом шаге можно запускать:

const stepIsValid = await trigger(["firstName", "lastName"]);

При успешном результате происходит переход к следующему шагу. YupResolver при этом не требует разделения схемы — достаточно использовать единую схему с условной логикой через when.

Интеграция с условной логикой Yup

Ручная валидация часто используется совместно с динамическими правилами Yup:

const schema = yup.object({
  password: yup.string().required(),
  confirmPassword: yup
    .string()
    .oneOf([yup.ref("password")])
});

При изменении одного поля можно вручную инициировать проверку зависимого:

onCha nge={() => {
  trigger("confirmPassword");
}}

Такой подход обеспечивает актуальность ошибок без необходимости полной перерасчётной валидации всей формы.

Поведение trigger в различных режимах формы

React Hook Form поддерживает несколько режимов работы, но trigger функционирует независимо от mode:

  • onSubmit — trigger используется автоматически при отправке;
  • onBlur — trigger работает на потерю фокуса, но может быть вызван дополнительно;
  • onChange — частые автоматические вызовы могут дублироваться ручными.

При этом ручной trigger всегда имеет приоритет и немедленно инициирует пересчёт состояния, независимо от выбранного режима.

Очистка и обновление ошибок при trigger

После успешной валидации YupResolver возвращает undefined для ошибок полей, прошедших проверку. React Hook Form автоматически очищает соответствующие записи в errors.

Если ранее поле было невалидным, но после ручного trigger стало корректным, ошибка удаляется без необходимости дополнительного вызова clearErrors.

Оптимизация использования trigger

Частые вызовы trigger могут приводить к избыточным перерасчётам схемы Yup, особенно при больших формах. Для оптимизации применяются следующие подходы:

  • ограничение области валидации конкретными полями;
  • группировка полей по логическим блокам;
  • использование debounce при вызове trigger в реактивных сценариях;
  • разделение тяжелых Yup-валидаторов на условные ветки when.

Сценарии применения в реальных интерфейсах

Ручной trigger особенно актуален в интерфейсах с нетипичной логикой:

  • проверка перед отправкой данных на сервер без submit;
  • динамическое отображение прогресса заполнения формы;
  • валидация при клике на кастомные кнопки навигации;
  • проверка блоков формы в модальных окнах перед закрытием;
  • подтверждение корректности данных перед генерацией отчётов или расчетов.

В таких сценариях trigger выступает как инструмент синхронизации состояния формы и пользовательского интерфейса, обеспечивая контроль над моментом запуска Yup-валидации без привязки к стандартным событиям ввода.

Оглавление