[feature request] improve form validation

[BenGamma]

Is your feature request related to a problem? Please describe.
On the mutiple forms you can't click the publish button before all the fields are validated. For now, the publish button is disable if the for is not validated, but you can't know which field is invalid.

Describe the solution you'd like
We'll need a more visual field validation. 2 options I have in mind :

• Remove the disable state on the button and trigger the validation on click. If fields are not valid, highlight them in red with a little text under the field explaining why
• Keep the disabledstate on the publish button and validate each field onBlur event.

Additional context
Example provided by react-final-form

[chrismclarke]

I personally think the nicer user experience is not letting them try to submit when there are errors and highlighting on blur, but if option would be a worthwhile improvement

[tudi2d]

I would like to work on this issue. My implementation would be the 2nd approach with the "onBlur"-event because of the UX as @chrismclarke explained above.

[BenGamma]

Hi @tudi2d,
The validation onBlur sounds good to me, tks for working on that !
Feel free to ask any questions here if you run into problems 🖖

[tudi2d]

I didn´t had a lot of time in the last 2 weeks, but I finally created a pull request. Sorry for tanking so long!

The field validation looks like this, if the user touched the fields:

For the future it would be nice to have an animation for the ErrorMessage (e.g. in ElementUI). A feature I also thought about while building this would be a validation on hover over the publish button. This way people would directly see which fields are required without having to touch them once.