jaredpalmer / formik

Build forms in React, without the tears 😭
https://formik.org
Apache License 2.0
33.97k stars 2.79k forks source link

How to use a single <ErrorMessage /> for multiple fields #1620

Open Manugal opened 5 years ago

Manugal commented 5 years ago

❓Question

Hi, my issue is simple but I find it very hard to solve with Formik. Is there a way to let Formik to "activate" only a single <ErrorMessage /> when I have, for example, two dependent fields such as name and surname?

I know that the name attribute of <ErrorMessage /> must reflect the name attribute of the <Field /> in order to show error message when validation fails on that particular field. But what I'd like to do is to have two <Field /> with different name attributes and have a single ` bound to these fields that show the error message only if one or both of them produce a validation error.

Is it possible using the current version of Formik?

Thanks.

ShadOoW commented 5 years ago

I was googling for the same thing when I found this post.

<Field name={name} />
<Field name={surname} />
<ErrorMessage name='name' />
{!errors.name && <ErrorMessage name='surname' />}

errors is provided by formik render method

        <Formik
          initialValues={}
          render={({ errors, touched, submitForm, isSubmitting }) => {
          }}
       />

I find myself using errors when i need to do custom error handling, like showing a red border for the input and so on, I think in the current version, this is the normal way.