Replies: 1 comment 1 reply
-
Hi! I guess calling validate on mount isn't as simple as I thought it was haha. I think you could do this to resolve the error. useEffect(() => {
formContext.validate().catch(() => {});
}, [formContext.validate]);
I'm tempted to dig into the expectations from UX here though. Do they really want to display validation errors for the inputs as soon as the form mounts and bug the user about how they've provided invalid input before they finished typing? I'm wondering if their expectations are more along the lines of "disable the submit button until the user types something in the form", rather than "disable the submit button until the form is valid". If it's the former, you could set some state |
Beta Was this translation helpful? Give feedback.
-
I understand this goes against recommendations as discussed at #158 (comment). However we have several forms that only have one or two input fields and the UX team would like the submit button disabled until the forms are valid.
I've tried to implement @airjp73's suggested solution to "call validate when the form mounts" but I'm struggling with
Error("Validate called before form was initialized.")
. I can get it working on initial SSR by using useHydrated from remix-utils but when doing CSR I can't find a way to determine when the form state is initialized and the page is already hydrated so validate is called before the form is initialized.How can I disable the submit button on mount and until the form is valid in a way that works with both SSR and CSR?
Beta Was this translation helpful? Give feedback.
All reactions