feat(form-core): Validation on first and consequent attempts

[theVedanta]

Enables functionality like:

const form = useForm({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  validators: {
    onBlur: ({ value }) => {
      console.log('ON Blur:', value)
    },
    onMount: ({ value }) => {
      console.log('ON Mount:', value)
    },
  },
  validationOnFirstAttempt: 'blur',
  validationOnConsequentAttempts: 'mount',
})

This is in reference with issue #1272
All kinds of criticism, API-related edits, structural edits, etc. are welcome!

The current approach is quite verbose and adds an option in the formOptions that could be attributed to an object. However, since I don't know what we can attribute it to, keeping this style of options open.

Let me know if the functionality seems ok and we can work on documentation/writing tests.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 9559bc1.

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

---

☁️ Nx Cloud last updated this comment at 2025-03-15 19:03:46 UTC

[pkg-pr-new]

Open in Stackblitz

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @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-simple
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/vue-form

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

@tanstack/solid-form

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

commit: 9559bc1

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.83%. Comparing base (b0dc32c) to head (9559bc1).
Report is 68 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1286      +/-   ##
==========================================
+ Coverage   88.32%   88.83%   +0.51%     
==========================================
  Files          27       28       +1     
  Lines        1199     1272      +73     
  Branches      315      333      +18     
==========================================
+ Hits         1059     1130      +71     
- Misses        125      127       +2     
  Partials       15       15              

☔ 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.

[Balastrong]

Thanks for the PR!

However I'm not entirely sure this is the right direction. I see it quite confusing to define a submit validator and then a flag to have a different validator... only if it's the first attempt.

The current approach is quite verbose

What approach are we covering with this new api?

[theVedanta]

Thanks for the PR!

However I'm not entirely sure this is the right direction. I see it quite confusing to define a submit validator and then a flag to have a different validator... only if it's the first attempt.

The current approach is quite verbose

What approach are we covering with this new api?

That's totally fair. I honestly think that checking submission attempts and defining a behaviour for validation would be quite verbose and this proves to be an alternative. React Hook Form has a similar API as mentioned in the issue referenced.

However, if you think that this kind of an option is not required in the tanstack-form, that would be understandable.

[da1z]

for me something like validationType and revalidationType sound more intuitive

[theVedanta]

Alright I'll seek some approval about this and let you know!