RFC: isValid prop for the whole form

[bcarroll22]

Hey guys!

First of all, we've really enjoyed using Formik in our products. It's made form submission so much easier. One pain point that we have in our usage though is that there's no easy way to always tell if the whole form is valid.

This would be nice for doing something like disabling the submit button based off one prop instead of having to check for other things. For example, as far as I can tell nothing shows up in the errors array until at least one field has been typed in. So although the form is invalid, you can't tell that just by checking the errors array.

Just wanted to see if anyone else thought something like that would be a good idea... Thanks again for the awesome library!

[jaredpalmer]

@bcarroll22 So we could add a computed isValid prop, but as you described, the problem is that isValid would be true on mount until a blur or change event fired off validation. Not sure if that is the desired behavior.

One option we thought about was a validateOnMount?: boolean option which would run validation within componentDidMount. The problem with that solution is that it would break SSR compat.

I think the best solution is exposing a an option called isInitialValid?: boolean | (props) => boolean, where the default is false. We could then support SSR, and the behavior you described above. The isValid prop could be computed like so:

<WrappedComponent
  isValid={(!dirty && isFunction(isInitialValid) ? isInitialValid(this.props) : isInitialValid) || Object.keys(this.state.errors).length > 0}
  ...
  />

What do you think?

P.S. Add prolio.com to #87 !

[bcarroll22]

@jaredpalmer got it, all of that makes sense. I wasn't really thinking of it in the context of SSR but I've got it now.

Would it also break SSR to have Formik manage an internal isValid state value, or something like it, that defaults to false but then flips to true when all of the Yup validations pass?

And cool! I'll definitely throw it in #87. Formik definitely took our forms to another level, it really helped out.

[pedromagalhaes]

Hi all, any example of this implementation? I couldnt find it working without having to do a change in the form. Im looking for a solution to get isValid of the form on load. Im using Yup validations and wrapping it WithFormik. Thanks