TanStack / TanStack/form

onSubmit validation skips untouched fields when some fields have onBlur validation

オープン
#1,663 コメント 5 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

question v1 v2: needs investigation
主要言語
TypeScript
スター
6.7k
フォーク
682
平均マージ
5日 18時間
マージ済み PR(30日)
7

説明

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

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

リンクされた StackBlitz の再現を react-form アダプターで開始し、各フィールドで onBlur バリデーションを有効にした状態で、フォーム送信時のバリデーション動作を確認します。First Name だけがフォーカスを失った後に送信すると、操作していない Last Name と Email に対してもエラーが報告されることを確認し、同時に、すぐに送信した場合はすべてのフィールドがバリデーションされる動作を維持します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。