canSubmit is always true on first render of form

[engelkes-finstreet]

Describe the bug

I am using a form with the zodValidator and have several field-level validations. On the first render the canSubmit property is true even though several fields are invalid. After changing the first input the validations run and canSubmit is invalid.

Your minimal, reproducible example

https://tanstack.com/form/latest/docs/framework/react/examples/zod

Steps to reproduce

1. Go to the official zod example
2. The Submit button is enabled even though the firstName has a minLength validation of 3
3. Type something in any of the fields
4. The Submit button is disabled until all the validations are correct

Expected behavior

I would expect that the canSubmit property considers all validations on the first render and shows a disabled Submit button from the start instead of changing from enabled to disabled after typing one letter and going back to enabled after all validations are correct.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: MacOS
Browser: Arc

TanStack Form adapter

react-form

TanStack Form version

0.20.2

TypeScript version

No response

Additional context

No response

[Balastrong]

Hey! The current behavior in the example seems correct to me, the validator is triggered onChange hence I'd expect no validation to be run as long as the value doesn't change.

What you're trying to achieve might be validating onMount.

---

With that said, if we agree that onMount is the answer, I noticed that there might be a bug there preventing canSubmit to go false but it's another topic we might want to tackle (and I already have an idea why we have this bug).

An alternative option could be to manually run form.validateAllFields("change") when your form mounts.

[afriddev]

** I figured out the solution for canSubmit return true when your component renders,you need to validate all your form.Filed when it mounts **

function runOnMount({ value }: any) { form.validateAllFields("change"); return value; }

validators={{ onChange: (value) => { return handleMobileNumberChange(value?.value); }, onMount: runOnMount, }}

<form.Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]} > {([canSubmit, isSubmitting]) => { return ( <Button disabled={!canSubmit} type="submit"> {!isSubmitting ? (!edit ? SUBMIT : MODIFY) : "Submiting ..."} </Button> ); }} </form.Subscribe>

[Glazy]

Not sure what the answer is here but I also encountered this same behaviour and find it confusing.

I validate my fields onChange (and sometimes onBlur) but I don't count the form as valid until every field has successfully ran it's validation(s).

I would've expected that disabling the "Submit" button based on isValid or canSubmit would be sufficient for this usage.