Chapter 9: Dynamic Validation

Core Idea

onDynamic (paired with revalidateLogic()) lets a form validate differently before vs. after the user's first submit attempt — the standard pattern for "don't nag on every keystroke until they've tried to submit once."

Key Concepts

• revalidateLogic({ mode, modeAfterSubmission }): mode controls validation timing before the first submit ('submit'/'blur'/'change'); modeAfterSubmission controls it after.
• onDynamic/onDynamicAsync: the validator(s) that actually run under this dynamic logic, settable at field or form level.
• Errors surface at form.state.errorMap.onDynamic, distinct from the plain onChange/onBlur/onSubmit error maps.
• onDynamic composes with the other timing validators (ch008) — it's an additional mode, not a replacement.

Code Examples

const form = useForm({
  defaultValues: { firstName: '', lastName: '' },
  validationLogic: revalidateLogic({
    mode: 'submit', // before first submit: only validate on submit
    modeAfterSubmission: 'blur', // after first submit: validate on blur
  }),
  validators: {
    onDynamic: ({ value }) => {
      if (!value.firstName) return { firstName: 'Required' }
      return undefined
    },
  },
})

• What it demonstrates: quiet validation until first submit, then immediate feedback on every subsequent blur — the classic "don't annoy first-time fillers" UX pattern.

Key Takeaways

1. Requires revalidateLogic() explicitly set as validationLogic — onDynamic does nothing without it.
2. This is the mechanism for "validate less aggressively before submit, more aggressively after" — reach for it before hand-rolling a hasSubmitted flag and branching your onChange validator yourself.
3. onDynamic errors live in a separate map (errorMap.onDynamic) from onChange/onBlur/onSubmit errors — check the right map when debugging why an error isn't showing.

Connects To

• Ch008 Form Validation: the base timing model onDynamic layers on top of.
• Ch017 Submission Handling: submissionAttempts/isSubmitted state this pattern typically keys off conceptually.