feat (form-core): Merging Form-level server errors with Field-level errors #1432

theVedanta · 2025-04-20T19:04:31Z

Instead of the previous serverValidate function just returning a string, we now return an object:

const serverValidate = createServerValidate({
  ...formOpts,
  onServerValidate: ({ value }) => {
    if (value.age < 12)
      return { age: 'Server validation: You must be at least 12 to sign up' }
  },
})

This then maps to the field-level errors with the setMeta options.

The only reason this is called a preliminary approach is because we are setting the onServer key of the errorMap differently.

Previously, the error map for the form looked like so:

{
  onServer: "You need to be 12 years or older to sign up"
}

Now however, the onServer map is slightly different:

{
  onServer: { age: "You need to be 12 years or older to sign up" }
}

This causes some degree of inconsistency, which is why I would love some feedback on whether we can use some other property (or maybe create our own!) to manage the errors between fields and forms. This would not be a comprehensive property but just a map to sync them back and forth.

NextJS support has been pushed. Remix and Start coming soon.
Support for Array field types will also be done shortly.

Would love your feedback and comments on this approach before I proceed!

Solves the following issue: #1260

nx-cloud · 2025-04-20T19:04:50Z

View your CI Pipeline Execution ↗ for commit e86715e

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

☁️ Nx Cloud last updated this comment at 2025-10-28 03:35:49 UTC

pkg-pr-new · 2025-04-20T19:05:51Z

More templates

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/form-devtools

npm i https://pkg.pr.new/@tanstack/form-devtools@1432

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/solid-form

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: e86715e

codecov · 2025-04-20T19:07:41Z

Codecov Report

❌ Patch coverage is 8.33333% with 33 lines in your changes missing coverage. Please review.
✅ Project coverage is 89.20%. Comparing base (6892ed0) to head (e86715e).
⚠️ Report is 41 commits behind head on main.

Files with missing lines	Patch %	Lines
...ages/react-form/src/nextjs/createServerValidate.ts	0.00%	15 Missing and 5 partials ⚠️
packages/form-core/src/FormApi.ts	18.75%	10 Missing and 3 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1432      +/-   ##
==========================================
- Coverage   90.35%   89.20%   -1.15%     
==========================================
  Files          38       38              
  Lines        1752     1834      +82     
  Branches      444      474      +30     
==========================================
+ Hits         1583     1636      +53     
- Misses        149      171      +22     
- Partials       20       27       +7

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

…-validation-merged-with-field-errors

…-errors

…github.com/theVedanta/form into server-validation-merged-with-field-errors

vincehi · 2025-09-16T09:40:17Z

Hello, do you need a hand to move this branch forward? I would love to see it happen :)

theVedanta · 2025-09-17T23:05:31Z

Hello, do you need a hand to move this branch forward? I would love to see it happen :)

Yeah sure dude, go for it!

theVedanta · 2025-10-19T18:33:12Z

Not sure if this feature is still requested or whether it has been fixed. Don't wanna tag maintainers but this has been dormant for a while, I'd like some insight on how to proceed! @LeCarbonator @harry-whorlow

LeCarbonator

Sorry for the long delay! I'm not too confident in my SSR knowledge, so I'll make sure to give this a try myself. I'll also go through some issues and the reproductions to confirm things.

Hopefully, this initial review should help with some refactoring. It's looking promising!

Since this has been stale for way too long, this will be my focus for now. Feel free to tag me if there's more info you need or a second review. I can also help out with the PR if you'd like.

LeCarbonator · 2025-10-24T09:09:04Z

packages/react-form/src/nextjs/createServerValidate.ts

      validationSource: 'form',
    })) as UnwrapFormAsyncValidateOrFn<TOnServer> | undefined

+    console.log('ON SERVER ERROR', onServerError)


Forgotten console.log

LeCarbonator · 2025-10-24T09:13:08Z

packages/react-form/src/nextjs/createServerValidate.ts

+    const errorsArray = onServerErrorVal
+      ? Array.isArray(onServerErrorVal)
+        ? onServerErrorVal.map((err) =>
+            typeof err === 'object' ? Object.values(err)[0] : err,
+          )
+        : [
+            typeof onServerErrorVal === 'object'
+              ? Object.values(onServerErrorVal)[0]
+              : onServerErrorVal,
+          ]
+      : []


This double ternary is a bit hard to follow. Please refactor to if statements instead.

LeCarbonator · 2025-10-24T09:14:18Z

packages/react-form/src/nextjs/createServerValidate.ts

+    const errorsArray = onServerErrorVal
+      ? Array.isArray(onServerErrorVal)
+        ? onServerErrorVal.map((err) =>
+            typeof err === 'object' ? Object.values(err)[0] : err,


I'll need to look into this one. Objects don't inherently have an order, so I'm not sure how consistent taking the first element would be. Perhaps we do this in other places?

The object format you're referring to is the server error fields coming in, right?

There is actually an order of sorts nowadays: https://2ality.com/2015/10/property-traversal-order-es6.html

Integer indices (array-like indices) come first, in ascending numeric order

String keys (non-integer strings) come next, in creation order

Symbol keys come last, in creation

LeCarbonator · 2025-10-24T09:23:23Z

The merge conflicts appear to be in some of the important diffs, so I'll leave that up to you. I'll see if convenient unit tests could be made for these as we don't want to regress on this.

theVedanta · 2025-10-28T03:13:13Z

Sorry for the long delay! I'm not too confident in my SSR knowledge, so I'll make sure to give this a try myself. I'll also go through some issues and the reproductions to confirm things.

Hopefully, this initial review should help with some refactoring. It's looking promising!

Since this has been stale for way too long, this will be my focus for now. Feel free to tag me if there's more info you need or a second review. I can also help out with the PR if you'd like.

Your help with the PR would be awesome! I'm pretty new to learning about the tanstack ecosystem.
I'll try to make another commit with the fixes.

changeset-bot · 2025-10-28T03:30:12Z

⚠️ No Changeset found

Latest commit: e86715e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

preliminary approach for merging server errors

aecdb83

theVedanta marked this pull request as draft April 20, 2025 19:08

theVedanta changed the title ~~Merging Form-level server errors with Field-level errors~~ feat (form-core): Merging Form-level server errors with Field-level errors Apr 22, 2025

theVedanta added 6 commits May 7, 2025 12:42

server map checked for empty value

a9d48c9

Merge branch 'main' of https://github.com/theVedanta/form into server…

fde9554

…-validation-merged-with-field-errors

Merge branch 'main' of https://github.com/theVedanta/form into server…

bea32b5

…-validation-merged-with-field-errors

Merge branch 'TanStack:main' into server-validation-merged-with-field…

bc561fc

…-errors

Merge branch 'server-validation-merged-with-field-errors' of https://…

9d70231

…github.com/theVedanta/form into server-validation-merged-with-field-errors

using the global error type

9413ca6

theVedanta marked this pull request as ready for review July 7, 2025 07:29

LeCarbonator requested changes Oct 24, 2025

View reviewed changes

removed console.log + changed to if statements

7c22179

theVedanta added 2 commits October 27, 2025 20:30

removed console.log + changed to if statements

3c82c98

merge

e86715e

Uh oh!

Uh oh!

feat (form-core): Merging Form-level server errors with Field-level errors #1432

Are you sure you want to change the base?

feat (form-core): Merging Form-level server errors with Field-level errors #1432

Conversation

theVedanta commented Apr 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud bot commented Apr 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Apr 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Apr 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

vincehi commented Sep 16, 2025

Uh oh!

theVedanta commented Sep 17, 2025

Uh oh!

theVedanta commented Oct 19, 2025

Uh oh!

LeCarbonator left a comment

Choose a reason for hiding this comment

Uh oh!

LeCarbonator Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

LeCarbonator Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

LeCarbonator Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

jasikpark Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LeCarbonator commented Oct 24, 2025

Uh oh!

theVedanta commented Oct 28, 2025

Uh oh!

changeset-bot bot commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

theVedanta commented Apr 20, 2025 •

edited

Loading

nx-cloud bot commented Apr 20, 2025 •

edited

Loading

pkg-pr-new bot commented Apr 20, 2025 •

edited

Loading

codecov bot commented Apr 20, 2025 •

edited

Loading

jasikpark Oct 24, 2025 •

edited

Loading

changeset-bot bot commented Oct 28, 2025 •

edited

Loading