Formik: General error message for long forms

[Jonofat]

I have a long form (looks even long on a mobile device) and if your validation fails near the top of the form ie: first input and you click submit at the bottom of the form, the user won't actually see the validation error unless they were to scroll all the way to the top. So, I would like to show a general message under the submit button so they actually know what is going on. For example, simply:

"There was an error in your submission"

I looked here: https://jaredpalmer.com/formik/docs/api/errormessage
but didn't see anything obvious there ( perhaps I missed it? )

Per field I am using as directed:

<ErrorMessage name="email" />

I did try this and it sort of works but only works if all the 3 fields are empty and wouldn't be great to have to type out each field name.

<ErrorMessage name={("firstName", "lastName", "email")}>
  {msg => (
    <div style={{ color: "red" }}>
      There were errors in your submission
    </div>
  )}
</ErrorMessage>

[coreyar]

Using the grouping operator in this manner results in "email" getting passed to the name prop. It appears that it works when all fields are blank but it should show the error even when only email is blank.

ErrorMessage uses the getIn utility to grab the error. It returns after it finishes looping through the path or it encounters a falsey value.

One solution would be to write a function that takes the formik error object and returns true if any errors are found. That could then be used to render a generic error message for the whole form.

If there is interest in adding something like this to the library I'm happy to take it on.

[coreyar]

You may also be able to hook into the validate prop to accomplish this - https://jaredpalmer.com/formik/docs/guides/validation#validate

[Jonofat]

Using the grouping operator in this manner results in "email" getting passed to the name prop. It appears that it works when all fields are blank but it should show the error even when only email is blank.

ErrorMessage uses the getIn utility to grab the error. It returns after it finishes looping through the path or it encounters a falsey value.

One solution would be to write a function that takes the formik error object and returns true if any errors are found. That could then be used to render a generic error message for the whole form.

If there is interest in adding something like this to the library I'm happy to take it on.

I certainly would be interested in this addition!

[johnrom]

Writing your own component for this is easy!

export const AnyErrorsMessage = props => {
  const formikContext = useFormikContext();

  // if formik.errors has any keys, there was an error
  return Object.keys(formikContext.errors).length > 0
    ? <p>{props.message}</p> 
    : null;
}

[Jonofat]

@johnrom , this is awesome, thanks!