TanStack / TanStack/form

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

Open
#1,990 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

v1 v2: needs investigation
Dominant language
TypeScript
Stars
6.7k
Forks
682
Avg merge
5d 18h
Merged PRs (30d)
7

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in FormApi.js around the handleSubmit check near line 462, comparing the internal state.canSubmit value with the form.state.canSubmit value shown by the React example. Reproduce the invalid-default-value case and verify that invoking handleSubmit calls onSubmitInvalid when canSubmit and isValid are false.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.