jannikbuschke / formik-antd

Simple declarative bindings for Ant Design and Formik.
https://codesandbox.io/s/github/jannikbuschke/formik-antd-example
MIT License
591 stars 80 forks source link

Improve <SubmitButton/> disabled behavior or improve documentation #135

Open suarez-agu opened 4 years ago

suarez-agu commented 4 years ago

Using formik-antd 2.0.0-beta.3 formik 2.1.4 antd 4.0.0

When setting values in required fields, the submit button will enable even if there are other required fields without any values in them

You can try it here in the "Sample Form" page. https://codesandbox.io/s/keen-franklin-wpefu

Fill out first name, the submit button will enable itself although lastname is required

jannikbuschke commented 4 years ago

I think this is by design. The lastname field has not been touched (lets assume it might have been overlooked by the user). In this case validation errors are not rendered for this component (only touched fields with validation errors actually show the errors).

In this case the submit button is enabled to allow triggering submit which in my opinion should rerun validation (either client side or server side). Then the user will get feedback whats wrong. If the Submit button would be disabled, the user would not necessarily know what is wrong (as said in this case he just overlooked the lastname) and does not have a clear way to solve the issue (no feedback is visible that can guide him).

That is why the submit button will only disable if the field has been touched (touching a field will render validation feedback). There are several (closed) issues regarding this topic and also the documentation is not clear on this.

I will leave this issue open to either improve the documentation or improve the behavior (feel free to come up with ideas).

suarez-agu commented 4 years ago

You raise a good point. I found this stackexchange question which tackles that question. It seems that the way the was designed is similar to that. https://ux.stackexchange.com/questions/76301/form-validation-and-disabled-buttons

We could leave it as is and I can update the documentation if needed.