Field Validation validates all fields?

[RoosterH]

In my code, I am assigning different validations for each field such as:

const validateVenue = value => {
	let error;
	if (!value) {
		error = 'Event Venue is required.';
		console.log('validateName = ', error);
	}
	return error;
};
<Field
	id="venue"
	name="venue"
	type="text"
	className="event-form__field"
	validate={validateVenue}
	onBlur={event => {
		handleBlur(event);
		updateEventFormData('venue', event.target.value);
       }
/>

What I found out is, all the fields will be validated when one filed gets changed. Is this an expected behavior? From docs, https://formik.org/docs/guides/validation#field-level-validation, it seems only the changed field will be validated.

[maddhruv]

When you have individual validators for the field, Formik validates individual files (onChange or onBlur depending upon the config). If you want to run validation on all the fields, there is a method returned by formik called validateForm, which you can easily call and validate the whole form. You can find more reference here -

• https://formik.org/docs/guides/validationa
• https://formik.org/docs/api/formik#validateform-values-any--promiseformikerrorsvalues

Example code you can refer

<Formik
      initialValues={{
        username: '',
        email: '',
      }}
      onSubmit={values => {
        // same shape as initial values
        console.log(values);
      }}
>
      {({ errors, touched, validateField, validateForm }) => (
        <Form>
          <Field name="email" validate={validateEmail} />
          {errors.email && touched.email && <div>{errors.email}</div>}

          <Field name="username" validate={validateUsername} />
          {errors.username && touched.username && <div>{errors.username}</div>}
          {/** Trigger field-level validation
           imperatively */}
          <button type="button" onClick={() => validateField('username')}>
            Check Username
          </button>
          {/** Trigger form-level validation
           imperatively */}
          <button type="button" onClick={() => validateForm().then(() => console.log('blah')))}>
            Validate All
          </button>
          <button type="submit">Submit</button>
        </Form>
      )}
</Formik>

Hope this answers your doubt 😄