onSubmit validation skips untouched fields when some fields have onBlur validation

[lukebennett88]

Describe the bug

When using TanStack Form with onBlur validation on all individual fields and onSubmit for the entire form, the onSubmit validation only validates fields that have been "touched" (focused/blurred). Fields that haven't been interacted with are skipped during form submission validation, even though they should be validated.

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-sviy39k3?file=src%2FApp.tsx

Steps to reproduce

1. Focus and blur the "First Name" field (leave it empty)
2. Leave the "Last Name" and "Email" fields completely untouched
3. Click "Submit Form"
4. Notice that only First Name shows an error, but Last Name and Email don't

Note: If you submit without blurring any fields, all fields are correctly validated and show errors.

Expected behavior

All fields should be validated on form submission, regardless of whether they have been touched or not. The onSubmit validation should validate the entire form schema, not just the "dirty" fields.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS 15.5
• Browser: Chrome
• Version: 138.0.7204.184

TanStack Form adapter

react-form

TanStack Form version

v1.15.2

TypeScript version

v5.9.2

Additional context

No response

[LeCarbonator]

This is intended behaviour. What's actually happening is that canSubmit is false because you have validation errors. The form never goes through the submission process because it exits early.

If you want all validators to still run on submission (regardless of canSubmit), you can enable canSubmitWhenInvalid in the form hook.

Alternatively, run the schema on the form level and hide errors visually if a field hasn't been blurred (or if submissionAttempts is larger than 0)

[lukebennett88]

Thanks @LeCarbonator, using canSubmitWhenInvalid fixes it for me 🎉

That said, from an a11y/UX perspective, I’m not sure this is a good default. It seems to assume you’ll disable the submit button when there are validation errors — but there’s been a fair bit written arguing against that approach:

• https://adrianroselli.com/2024/02/dont-disable-form-controls.html
• https://adamsilver.io/blog/the-problem-with-disabled-buttons-and-what-to-do-instead/

Might be worth revisiting in a future major release?

[TeChn4K]

canSubmitWhenInvalid does not appear to re-run a complete validation on submit:

1. take a imaginary form with 3 required fields
2. fill only one field, submit: two missing field errors
3. resolve only one error, BUT empty the previous valid field
4. submit: resolved error disappear 👍, new error does not appear 👎

[LeCarbonator]

Do you have a reproducible example of this 3 field setup?

[TeChn4K]

@LeCarbonator Yes sure! https://stackblitz.com/edit/tanstack-form-qw458zk6?file=src%2Findex.tsx