fix(form-core): onSubmitInvalid not called when canSubmit false

[Pascalmh]

onSubmitInvalid callback in FormApi is called when a submission attempt is made while canSubmit is false

Fixes #1696

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 15705d6

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	49s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-08-22 07:42:28 UTC

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-large-form
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-standard-schema
• @tanstack/form-example-lit-array
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-standard-schema
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/form-example-react-dynamic
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-large-form
• @tanstack/form-example-solid-simple
• @tanstack/form-example-solid-standard-schema
• @tanstack/form-example-svelte-array
• @tanstack/form-example-svelte-simple
• @tanstack/form-example-svelte-standard-schema
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple
• @tanstack/form-example-vue-standard-schema

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@1697

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@1697

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@1697

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@1697

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@1697

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@1697

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@1697

commit: 15705d6

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.53%. Comparing base (424c3c7) to head (15705d6).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1697      +/-   ##
==========================================
+ Coverage   90.52%   90.53%   +0.01%     
==========================================
  Files          37       37              
  Lines        1688     1690       +2     
  Branches      421      421              
==========================================
+ Hits         1528     1530       +2     
  Misses        143      143              
  Partials       17       17              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kusiewicz]

While this ensures onSubmitInvalid gets called, it happens before the submit validation. This means the formApi will have a stale error state when the callback is triggered.

[LeCarbonator]

@kusiewicz It happens before the submit validation, but only in cases where canSubmit is false. That means there are currently errors present that have not been resolved, which is not stale.

If a user wanted to rerun validators even if canSubmit is false, they can use the canSubmitWhenInvalid property

[kusiewicz]

@kusiewicz It happens before the submit validation, but only in cases where canSubmit is false. That means there are currently errors present that have not been resolved, which is not stale.

If a user wanted to rerun validators even if canSubmit is false, they can use the canSubmitWhenInvalid property

Ok i got it. I just thought that there:

  onSubmitInvalid: ({ formApi }) => {
    console.log(formApi.state.fieldMeta.xxx.errors);
  }

we should expect most recent errors, didn't know about canSubmitWhenInvalid

[LeCarbonator]

well, they are the most recent errors. The most recent errors are preventing a submit altogether, so this PR asserts that attempting one should still trigger onSubmitInvalid

[jiji-hoon96]

Hello @Pascalmh!

I encountered the same issue mentioned by @kusiewicz. Calling onSubmitInvalid before performing validation may result in outdated error states being passed to the callback.

Would you consider restructuring the logic to first perform the validation, check canSubmit, and then call onSubmitInvalid with the updated state? In this case, the user would receive the most recent validation error in the callback.

If it's okay with you, would it be possible for me to work on this and submit a PR?

[Pascalmh]

@jiji-hoon96 sure, if you want you can PR against my fork and I'll merge your changes in so they appear in this PR here - or you can create a new PR, whatever you prefere 👍

[LeCarbonator]

@jiji-hoon96 Are you sure it's stale? Even with canSubmitWhenInvalid: true?

[jiji-hoon96]

Yes. I have confirmed its validity through testing. I may have made a mistake, so I would appreciate it if you could take a look at #1711 PR.

[jiji-hoon96]

Pascalmh#5

I have submitted a pull request with some modifications to @Pascalmh`s work.