Skip to content

If validation fails in onSubmitAsync, error does not resolve with a valid input #486

Closed
@AkshayPathak

Description

@AkshayPathak

Describe the bug

To prevent the submission of a pristine form, the recommended way to validate is in the onSubmitAsync. In the code sandbox, the onBlur and onSubmitAsync functions both have the same Zod validator.

When a pristine form is submitted, an error on the first name appears. However, if the input is modified, the error does not resolve and also does not allow the form to be submitted.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/confident-tereshkova-2xl2hj?embed=1&file=%2Fsrc%2Findex.tsx%3A1%2C1

Steps to reproduce

  1. Navigate to sandbox
  2. Click Submit without touching any of the fields. You will see the validation error shown to the right of the First Name input.
  3. Enter some text in the First Name input. Notice that the validation message does not disappear and even with a valid input, the Submit button is not enabled.

Expected behavior

The error should clear after a validation error with a pristine form in the onSubmitAsync function and allow the form to be submitted.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • OS: Linux
  • Browsers: Chrome, Firefox

Tanstack Form adapter

react-form

TanStack Form version

0.4.1

TypeScript version

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions