formik icon indicating copy to clipboard operation
formik copied to clipboard

Validate on blur/change but only after the form has been submitted at least once.

Open ybrodsky opened this issue 3 years ago • 4 comments

Feature request

Current Behavior

Right now you have the option to set validateOnBlur. When using this in combination with the handler handleBlur whenever you blur out of a field the validations are run. However this causes some thing that looks weird: imagine you have a form with 10 fields. You click the first field, write, go to the next field and instantly the whole form is validated. You get error messages for fields which you still haven't touched. Looks weird.

Desired Behavior

Would be nice that the fields validate on blur only after a form has been submitted. For example: You clock the first field, write. Click submit. The form validation runs and you get the error for invalid fields. You click on an invalid field, complete it and blur out of it. The form is re-validated.

Suggested Solution

Might be good to have an extra option that let's you decide whether or not you want to validate on blur only after the form has been submitted at least once. validateOnBlurAfterSubmittion: true | validateOnChangeAfterSubmittion: true. There's a prop that formik exposes submitCount. I am doing a hand-made hack to only validate on blur when submitCount > 0. I guess you could do something like that internally.

Who does this impact? Who is this for?

This impacts every form that needs to validate on blur on certain conditions. Imagine a login form. You complete the email, when you go to the password field the field has an error. Why? I still havent done anything in that field, I got no chance. The more fields the form has the weirder it looks

Describe alternatives you've considered

No alternatives I have seen other than doing some sort of hack.

ybrodsky avatar Jul 30 '21 17:07 ybrodsky