`onSubmitInvalid` not called when `canSubmit` is false (v1.27.7)

Offen
  • Stimmt etwas nicht?
#1,990 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

  • #1997 von @Dhavanesh24cs412 — ohne Merge geschlossen

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
45/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

Beginne in FormApi.js bei der handleSubmit-Prüfung etwa in Zeile 462 und vergleiche den internen Wert state.canSubmit mit dem vom React-Beispiel angezeigten Wert form.state.canSubmit. Reproduziere den Fall mit dem ungültigen Standardwert und verifiziere, dass der Aufruf von handleSubmit onSubmitInvalid aufruft, wenn canSubmit und isValid false sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

v1 v2: needs investigation
Describe the bug

onSubmitInvalid callback is not being called when the form is invalid and handleSubmit() is invoked, even though canSubmit is false and isValid is false.

This appears to be the same issue as #1696, which was supposedly fixed in PR #1697 (merged September 30, 2025). However, the issue persists in v1.27.7.

Your minimal, reproducible example
import { useForm } from '@tanstack/react-form'
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'

const schema = z.object({
  value: z.number().min(1, 'Value must be greater than 0'),
})

function MyForm() {
  const form = useForm({
    validatorAdapter: zodValidator(),
    defaultValues: { value: 0 },
    validators: {
      onChange: schema,
      onSubmit: schema,
    },
    onSubmitInvalid: () => {
      console.log('onSubmitInvalid called') // This is NEVER called
    },
    onSubmit: ({ value }) => {
      console.log('onSubmit called', value)
    },
  })

  return (
    <button
      onClick={() => {
        console.log('Before handleSubmit:', {
          canSubmit: form.state.canSubmit,
          isValid: form.state.isValid,
          submissionAttempts: form.state.submissionAttempts,
        })
        form.handleSubmit()
        console.log('After handleSubmit:', {
          canSubmit: form.state.canSubmit,
          isValid: form.state.isValid,
          submissionAttempts: form.state.submissionAttempts,
        })
      }}
    >
      Submit
    </button>
  )
}
Steps to reproduce
  1. Create a form with onChange and onSubmit validators
  2. Set default values that are invalid (e.g., value: 0 when validator requires min(1))
  3. Define onSubmitInvalid callback
  4. Click the submit button
  5. Observe that onSubmitInvalid is never called
Expected behavior

onSubmitInvalid should be called when:

  • canSubmit is false
  • isValid is false
  • handleSubmit() is invoked
How often does this bug happen?

Every time

Screenshots or Videos
Image
Platform
  • OS: macOS
  • Browser: Chrome
  • TanStack Form version: 1.27.7
  • TypeScript version: 5.x
TanStack Form adapter

None

TanStack Form version

1.27.7

TypeScript version

5.2.2

Additional context

Looking at the source code in FormApi.js, the check at line ~462 should call onSubmitInvalid:

if (!this.state.canSubmit && !this._devtoolsSubmissionOverride) {
  this.options.onSubmitInvalid?.({
    value: this.state.values,
    formApi: this,
    meta: submitMetaArg
  });
  return;
}

However, it seems like this.state.canSubmit might be reading a stale or different value than what's visible from form.state.canSubmit in React, possibly due to the derived store not being synchronized at the time of the check.

Vorherrschende Sprache
TypeScript
Sterne
6.8k
Forks
705
Ø Merge
1 T. 12 Std.
Gemergte PRs (30 T.)
14

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/form

Alle Issues in TanStack/form

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.