Trigger validation for all array inputs

[kimsagro1]

I have an form with an array using dynamic validation. When I add a new empty array entry and click submit, I see a validation error indicating that the field is empty as expected. If I add an additional couple of array entries and click submit again, validation errors don't show for the additional entries unless I fix the validation issue with the first entry.

See this reproduction:
https://stackblitz.com/edit/tanstack-form-x6aimpfn

• Click "Add person" then submit
• Click "Add person" a couple more times then submit

Is there any way to trigger validation for all entries when submit is clicked?

[everton-dgn]

The validation itself does run for every registered field on submit, the problem is on the display side. New array items start with isTouched: false, so if your field only renders errors when touched, the errors for newly added items stay hidden until you focus and blur them.

The fix is to also show errors once the form has been submitted at least once. form.state.submissionAttempts bumps on every submit (including failed ones), so this works out of the box:

<form.Field
  name={`people[${index}].name`}
  validators={{ onChange: ({ value }) => !value ? 'Required' : undefined }}
>
  {(field) => (
    <>
      <input
        value={field.state.value}
        onChange={(e) => field.handleChange(e.target.value)}
      />
      {(field.state.meta.isTouched || form.state.submissionAttempts > 0) &&
        field.state.meta.errors.length > 0 && (
          <em>{field.state.meta.errors.join(', ')}</em>
        )}
    </>
  )}
</form.Field>

With that, the moment the user clicks Submit and the new empty items fail validation, their errors render without the user needing to focus each field.

If you want a form-level error too ("at least one person required"), a validator on the form itself:

const form = useAppForm({
  defaultValues: { people: [] as Person[] },
  validators: {
    onSubmit: ({ value }) =>
      value.people.length === 0 ? 'Add at least one person' : undefined,
  },
});

submissionAttempts lives on the form state store (see packages/form-core/src/FormApi.ts), so this works identically across the framework adapters.

[kimsagro1]

I found the solution was adding canSubmitWhenInvalid: true to the form

  const form = useForm({
    canSubmitWhenInvalid: true,
    ...
  });