validate on page load?

[niklasgrewe]

Hi, i want to ask, if there is a way to validate the form after page load, so the submit button is disabled by default? I think this is a better UX, because on an empty form, users shouln't have the possibility to click the submit button.

[airjp73]

I don't think there's currently an exposed API that would let you do this. It would be possible if we add a validateForm function to useFormContext or something. Then you could validate in a useEffect.

I've also been thinking about adding a dirty state to the form that you could use to disable the form when nothing has been input.

[bensont1]

this would be great to have for our use case as well!

[airjp73]

Following up on this. In a recent release, I added a validate helper to useFormContext (doc. You could use that to validate in useEffect and it would display errors & set isValid to false.

I do want to caution against this pattern though. Having errors displayed on the form before the user has typed anything isn't a good feeling. And disabling the submit button when there are no visible errors can cause confusion and frustration -- the user might know that something is wrong with the form, but they have no idea what. Or maybe they just think your site is broken.

Also worth noting that disabling the submit button when the form is invalid also causes issues with users that have JS disabled. If the form submits and the action returns errors, the form will render with the submit button disabled unless you're explicitly checking that JS is enabled. This may not be important to your app/site, but it's good to know if it is.

My general recommendation is to leave the submit button enabled all the time. This has a couple UX advantages:

• When the user submits and invalid form, the first invalid field is focused automatically, showing them exactly what they need to fix and setting them up to fix it. This is native HTML behavior that is emulated by this library.
• If the user didn't touch a field yet and doesn't realize it's required, clicking submit will validate the whole form and display errors on everything they missed.

[aniravi24]

Thank you for the explanation, I found this insightful and it made me rethink my approach.