reactjs - How to handle API validation call in formik

Question

I've a field name called email that validate email format using validationSchema as

email: yup.string().required('required').email() 

and also integrate some API that check duplicate email when user submit the form (API get called in handleSubmit to make sure that email is in correct format) and will set a field error when the server response as it already exist. So the flow here is,

Checking an email format (onBlur and onChange) -> user press submit form -> call API checking  duplicate email -> if email is already exist then setFieldError as 'Email is already exist' or otherwise submit the form. 

This work as expected but the problem come when the form contains more than one field. All fields get validated when any changes happened inside the form. If I have 2 fields email, and password. After user submit duplicate an email field shows 'Email is already exist' correctly but when I update value in password field. The error in email will be gone and get validated by validationSchema even the changed doesn't occur on its field. Any suggestion on this?

Answer 1

One way to solve this problem that isn't the best, is to make the form validate only on submit. This means passing false to validateOnBlur and validateOnChange in your Formik / withFormik component.

You can also pass an async field level validation level as you can see in the docs.