Formik: Changing single input value as a user makes all inputs dirty (setting errors messages)

[santospatrick]

[lewisblackwood]

+1 here.

Ideally, I'd like for handleChange to only validate and return errors for the field that's been changed. I'd then like all the form's values to be validated and any errors returned before handleSubmit is called.

[eonwhite]

To ensure you don't see error messages displayed on untouched fields, you want to check the touched value for that field when deciding whether to display the error message or not.

For example:

{errors.email && touched.email && <div>{errors.email}</div>}

@jaredpalmer I think it'd be good if we updated the examples to show the proper use of touched.

[lewisblackwood]

Oh rad, thanks @eonwhite!

[santospatrick]

touched helper is not working properly, or i am using it wrong? Touched is not returning me anything.

const MyForm = ({ values, touched, handleChange, handleSubmit, errors })
...
<input id="nome" placeholder="Enter your nome" type="text" value={values.nome} onChange={handleChange}/>
{errors.nome && touched.nome && <div  style={{ color: 'red' }}>{errors.nome}</div>}

live example https://codesandbox.io/s/wpMx40WBX

[eonwhite]

Be sure to add onBlur={handleBlur}, so that touched will get set when you lose focus on the input.