Formik: How to use a single <ErrorMessage /> for multiple fields

Created on 20 Jun 2019  路  1Comment  路  Source: formium/formik

鉂換uestion

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.

stale

Most helpful comment

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.

>All comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

outaTiME picture outaTiME  路  3Comments

pmonty picture pmonty  路  3Comments

dearcodes picture dearcodes  路  3Comments

jaredpalmer picture jaredpalmer  路  3Comments

PeerHartmann picture PeerHartmann  路  3Comments