Formik: onError Function

[haThaiHoang]

🚀 Feature request

I think we should have a callback function like onError pass into Formik to call after validate failed.

Thanks for a great library.

[jaredpalmer]

Can you show an example of how this would be beneficial?

[AnotherHermit]

I have an example of where this would be useful. I am currently implementing Analytics in our web app and was just looking for some way of sending an event with information about which fields the user failed to fill in correctly to know which parts of our forms that could use improvement.

I am not sure if there is a simple workaround but a callback after validation failed would be very handy.

[haThaiHoang]

Can you show an example of how this would be beneficial?

I want to scroll up at the top of the window to see the error messages when the form validate failed

[johnrom]

I think this could be pretty useful, but I think there are different use cases for triggering errors based on different criteria. Maybe a component would be good for this:

// I'm not sure if errors are memoized by default
const defaultShouldTriggerErrors = (errors, nextErrors) => !deepEquals(errors, nextErrors);

export const ErrorListener = ({onError, shouldTriggerErrors}) => {
    const shouldTriggerErrors = shouldTriggerErrors || defaultShouldTriggerErrors;
    const formik = useFormikContext();
    const [errors, updateErrors] = React.useState(formik.errors);

    React.useEffect(() => {
        if (shouldTriggerErrors(errors, formik.errors) {
            onError(formik.errors);

            updateErrors(errors);
        }
    }, [formik.errors]);

    return null;
}

export const MyForm = () => (
    <Formik>
        <ErrorListener onError={scrollToTop} />
    </Formik>
);

[jaredpalmer]

This behavior is really straightforward with useEffect() as you just showed

[haThaiHoang]

I think this could be pretty useful, but I think there are different use cases for triggering errors based on different criteria. Maybe a component would be good for this:

// I'm not sure if errors are memoized by default
const defaultShouldTriggerErrors = (errors, nextErrors) => !deepEquals(errors, nextErrors);

export const ErrorListener = ({onError, shouldTriggerErrors}) => {
    const shouldTriggerErrors = shouldTriggerErrors || defaultShouldTriggerErrors;
    const formik = useFormikContext();
    const [errors, updateErrors] = React.useState(formik.errors);

    React.useEffect(() => {
        if (shouldTriggerErrors(errors, formik.errors) {
            onError(formik.errors);

            updateErrors(errors);
        }
    }, [formik.errors]);

    return null;
}

export const MyForm = () => (
    <Formik>
        <ErrorListener onError={scrollToTop} />
    </Formik>
);

This helped me. Thank you guy very much!

[johnrom]

@haThaiHoang awesome! please close this issue out if it's resolved

[SNPR]

I think this could be pretty useful, but I think there are different use cases for triggering errors based on different criteria. Maybe a component would be good for this:

// I'm not sure if errors are memoized by default
const defaultShouldTriggerErrors = (errors, nextErrors) => !deepEquals(errors, nextErrors);

export const ErrorListener = ({onError, shouldTriggerErrors}) => {
    const shouldTriggerErrors = shouldTriggerErrors || defaultShouldTriggerErrors;
    const formik = useFormikContext();
    const [errors, updateErrors] = React.useState(formik.errors);

    React.useEffect(() => {
        if (shouldTriggerErrors(errors, formik.errors) {
            onError(formik.errors);

            updateErrors(errors);
        }
    }, [formik.errors]);

    return null;
}

export const MyForm = () => (
    <Formik>
        <ErrorListener onError={scrollToTop} />
    </Formik>
);

Can I somehow use this functionality without using hooks?