How to disable form submit button using availity reactstrap validation

[aliiqbalIntelligenes]

I'm using reactjs with availity reactstrap validation. I want to disable form submit button when form have validation errors. Only enable submit button when there is no validation errors all email address is valid all validation passes. How can i achieve this?

https://stackoverflow.com/questions/57736168/how-to-disable-form-submit-button-using-availity-reactstrap-validation

[GoPro16]

Currently this library is using the legacy context api and there aren't any solid docs on this at the moment. We have a planned re-write to the new context api and including full docs for how it all works. For now you can do something like the below:

code sandbox

If you use a class component you can get access to practically anything you want. Just check out the source code to see all the exact properties.

[TheSharpieOne]

What you want is considered horrible from a UX point of view and is purposely not supported by this library.

This library provides the functionality so when a user submits an invalid form, it will display the error messages, informing the users why the form could not be submit and allowing the user to correct the errors.

We have onValidSubmit so that your callback function only gets triggered when the form is valid and you do not have to handle any of the invalid submission.

Why is disabling the submit button so bad? It doesn't give the user any feedback. The user fills out your form as best he/she can, but the user accidentally misses a required field. The user goes to submit the form. Clicking the submit button does nothing. The user clicks the submit button over and over again. Still the button does nothing. The user cannot submit your form and doesn't see anything wrong with the values entered. Your form is broken (from the user's point of view). The user is angry.

That same scenario without disabling the submit button. The user fills out your form as best he/she can, but the user accidentally misses a required field. The user goes to submit the form. Clicking the submit button displays an error message next to the field he/she missed informing him/her it is required. The user fills out the field and clicks the submit button again. The form is submitted. The user is happy.