[Implemented] Add a way for useFormContext() to return if the form is currently valid?

[jakejscott]

I would like to be able to have a submit button that is only enabled once the form is valid.

[airjp73]

I think I will add something like an isValid to the form context -- you're now the second person who has asked and it's a good idea. 😊

For now you can get the job done with the fieldErrors in useFormContext.

const { fieldErrors } = useFormContext()

disabled={Object.keys(fieldErrors).length > 0}

[jakejscott]

I think I've ran into probably a bigger issue, which is that the form validation triggers only once you tab out of a field using onBlur.

Not sure if you want to take this library in the direction of how react-hook-form works where it tracks which fields have been touched and it has a modes on the form for when validation should fire? https://react-hook-form.com/api/useform

In my case I'm not super worried about supporting the no-js use case as I want advanced form validation -- So wondering if I should just use react-hook-form :)

[airjp73]

It's something I've been thinking about a little.

So far I've been taking the approach of leaving when to validate up to the user. The example in the readme passes validate to onBlur, but if you want to track some touched state and validate on change after the field has been touched, that should be doable with the helpers you get from useField.

Looking at the different modes in react-hook-form, it would be helpful to have some hasSubmitBeenAttempted value passed down, but everything should be implementable beyond that.

Is there anything you feel is missing that would prevent you from validating the way you want to?

[airjp73]

I added an isValid value to useFormContext in 3.1.0

[airjp73]

It is now possible to track touched states as of 3.2.0.

[jakejscott]

Awesome