diff --git a/examples/react/large-form/src/features/people/page.tsx b/examples/react/large-form/src/features/people/page.tsx index 3743662bd..a81d37c5e 100644 --- a/examples/react/large-form/src/features/people/page.tsx +++ b/examples/react/large-form/src/features/people/page.tsx @@ -6,31 +6,6 @@ import { peopleFormOpts } from './shared-form.tsx' export const PeoplePage = () => { const form = useAppForm({ ...peopleFormOpts, - validators: { - onChange: ({ value }) => { - const errors = { - fields: {}, - } as { - fields: Record - } - if (!value.fullName) { - errors.fields.fullName = 'Full name is required' - } - if (!value.phone) { - errors.fields.phone = 'Phone is required' - } - if (!value.emergencyContact.fullName) { - errors.fields['emergencyContact.fullName'] = - 'Emergency contact full name is required' - } - if (!value.emergencyContact.phone) { - errors.fields['emergencyContact.phone'] = - 'Emergency contact phone is required' - } - - return errors - }, - }, onSubmit: ({ value }) => { alert(JSON.stringify(value, null, 2)) }, diff --git a/examples/react/large-form/src/features/people/shared-form.tsx b/examples/react/large-form/src/features/people/shared-form.tsx index 4a8afc032..ea5402b7e 100644 --- a/examples/react/large-form/src/features/people/shared-form.tsx +++ b/examples/react/large-form/src/features/people/shared-form.tsx @@ -17,4 +17,29 @@ export const peopleFormOpts = formOptions({ phone: '', }, }, + validators: { + onChangeAsync: async ({ value }) => { + const errors = { + fields: {}, + } as { + fields: Record + } + if (!value.fullName) { + errors.fields.fullName = 'Full name is required' + } + if (!value.phone) { + errors.fields.phone = 'Phone is required' + } + if (!value.emergencyContact.fullName) { + errors.fields['emergencyContact.fullName'] = + 'Emergency contact full name is required' + } + if (!value.emergencyContact.phone) { + errors.fields['emergencyContact.phone'] = + 'Emergency contact phone is required' + } + + return errors + }, + }, })