Getting form's validation status onChange?

[rclai]

Is there a way to get the form's validation status during onChange? Right now the callbacks that you provide are error-centric, but there's no way to get valid-centric results.

My use-case: I'd like to light something green when the form is valid and ready to be submitted.

[jquense]

the validation status of any field isn't available onChange since the change validations aren't run until the requested value is fed back into the form. Form Fields are injected with a bunch of meta data tho about their current state, which you can use in Inputs to add or remove classes. Specifically meta.valid. Ultimately tho i'd like to support your use case built in, but haven't gotten to it.

[rclai]

Yes, this would be great otherwise I have to do yet another yup validation manually onChange to get the green indication. If you know a better way to workaround this let me know.

[jquense]

wrap the Inputs with your own component and add a valid className onBlur

[rclai]

The functionality that I'm looking is form-wide, not field-specific. I want the submit button to be enabled and green the instant the entire form is valid.

[jquense]

sure, makes sense. then just listen to onError and respond when there are no errors. the name is a bit misleading, it will be fired anytime validation completes with the errors object. when the form is valid it will be an empty object.

[rclai]

Ahh okay. Thanks.

[rclai]

Actually, I noticed that the errors begin to add up only as you interact or blur out of the fields or if you submit the form, so it's still not ideal. It would be nice if I could control the submit buttons view state just using something like <Form.Button disabled={!this.formSchema.isValid()}> that would be the easiest.

I don't know if you want me to re-open this since it requires making Yup synchronous, which I doubt you want to do.

[jquense]

its not possible to make yup sync but you control all the values needed to do that already. Put the initial validity in state, and change it as the form updates:

componentWillMount() {
  mySchema.isValid(initialValue)
    . then(isValid => this.setState({ isValid }))
}

onError = (errors) => this.setState({ 
  isValid: !Object.keys(errors).length 
})

render() {
  return (
    <Form schema={mySchema} defaultValue={initialValue} onError={this.onError}>
      {/* ... */}
      <Form.Button disabled={!this.state.isValid} />
   </Form>
}

[rclai]

I just tried the code you showed me and it does not help my use-case because the onError only validates the field I was working with and not the entire form.

Only the initial validation works properly.

[jquense]

ok I'm not really sure i understand your use case then. onError doesn't validate anything, its a callback the fires when the validation state of the form changes. Why would you want to validate the entire form when one field changes?

[jquense]

Like i said, and demonstrated above, you can control the entire state of the form and do whatever you want. if you want to run validation for the entire form on each change, then do that in one of the callbacks.

Generally tho i don't even think disabling a a submit button until the form is valid is a good idea. it makes it really easy to construct forms that are user hostile, e.g. the user has no idea what is required of them and no feedback from the inputs about what to do unless they blur through each and every input to trigger a warning.

[rclai]

With the code you showed me, the submit button will be enabled when one field is valid, but the other fields are not valid.

The user will get feedback on each field, it's just that there's no code-friendly way to see the validation status of the entire form during form onChange unless I do yupSchema.isValid(formValues) in it. I guess that's how I will need to enable/disable the submit button. The reason I asked for this was because I thought you were already doing form-wide validation under the hood (like some kind of formIsValid boolean somewhere in there) and was wondering if you could just emit it.

[vanditasharma]

Any progress or work around on this one?

[rosskevin]

If you are looking to disable a submit button based on status for example, see sample code in #98

[jquense]

I'd also like to make this simpler, but it's ultimately fairly difficult to do given how state is managed in Form and Form.Buttons, need to be able to function outside (in a Form.Context)