Validate field after onBlur called

[serzh-f]

Hi. How can I check specific field for server errors?

For example:

  const [serverErrors, setServerErrors] = useState({});

const formik = useFormik<Form>({
    initialValues: initialValues,
    validationSchema: FormSchema,
    enableReinitialize: true,
    onSubmit: async (values) => {
      if (isEmpty(serverErrors)) {
        //send request to backend
      }
    },
  });

const handleBlur = async (e) => {
    const { name, value } = e.target;
    formik.handleBlur(e);

    if (!isEmpty(value)) {
      let error;
      const resp = await api.checkValue({ [name]: value });

      if (!resp.data.empty) {
        error = 'field exists';
      }

      if (error) {
        setServerErrors({ ...serverErrors, [name]: error });
      } else {
        const errors = { ...serverErrors };
        delete errors[name];
        setServerErrors(errors);
      }
    }
  };

But how can I develop it with formik API?

What I mean: I want to call client validation and if it has not error, then validate this field in backend. After that I want to see backend error on my UI.

[johnrom]

I would avoid adding this directly to Formik.errors because Formik can revalidate your fields and possibly remove your API errors at any time.

Instead I would :

• add custom api errors state with useState or store it in FormikStatus.
• Then on Submit you have total control over how and when these API error is displayed using setState or Formik.setStatus

You could set initialValues to the submitted values onSubmit and display API errors for a field when field.value === field.initialValue, or just display it until the next submit.