Fields are not set as touched before Submit except for when none are "manually" touched

🐛 Bug report

Current Behavior

When I try to submit the form without touching any field, it will set all fields as touched and correctly display the error messages, which is expected (using the ErrorMessage component, which checks if the field is touched and has an error)

But if I focus on at least one input field, Formik won’t set the rest of the fields as touched on submit and therefore won’t display the error messages related to them. Even if I change the “manually touched” field and make it valid, when I submit again Formik will still not set the rest of the fields as touched (and their error messages won’t be shown).

I can clearly see that as I log the touched object inside the render prop.

That occurs regardless of me setting an initial value for the fields (an empty string or undefined).

Expected behavior

On submit, Formik should set all fields as touched and therefore display the error messages for any field that has an error, regardless if they have been touched by the user or not.

The author mentions here that all fields are set to touched before submit.

UPDATE

I’ve set up this sandbox from a basic demo to exemplify this.

Steps to reproduce:

• focus on the Name input field without typing anything
• click on Submit

Result: the only error message displayed will be on the Name field, despite the e-mail being invalid too.

It seems than that this behaviour is intended - once any field is focused, any other field won’t be set to touched by Formik before submit and only the one(s) manually touched will display the error.

In my case, though, I have a few fields that are pre-populated (and valid). If I touch any of those and try to submit, it won’t submit but there won’t be any error messages displayed which is weird.

BUT, in this case, which is the exact same example above with the exception that the Name has an initial value, if you follow the steps to reproduce you will see the error message displayed on the Email field.

So there must be something wrong with my code that is not setting the fields to touched for some reason…

Your environment

• Formik v1.5.7 (same version from the examples above)
• Node v10.15.3
• MacOS

[johnrom]

@isaacalves When I test your example, I enter a field, and I click submit, it’s not actually triggering the submit, instead it’s triggering the blur from leaving the field. This is because when blur triggers, an error message appears and pushes the submit button down. If I click towards the bottom of the submit button, it will “land” where my pointer is and the full submit will occur.

Let me know if that’s the issue you’re seeing.

[marcioacmauricio]

My problem is that I need that when I send the form without any fields filled in I would need the fields that are required to show the error message. If redux uploads something wrong and the user tries to send the form it will not receive any message because the field has not been touched, and the form will not be sent.

I solved the problem with an if (props.touched.agency_name? props.touched.agency_name: props.submitCount> 0) So if the form is sent at least once, all fields can show your error messages