Friday 13 November 2020

Formik validation isSubmitting / isValidating not getting set to true

I've got a form that my users have requested I make it blindingly obvious that the form is invalid. So I'm planning to pop up a sweetalert dialog to let them know they need to double check the form. I thought I could do it in the validation like this to alert them when a submission attempt fails:

const validate = values => {
    console.log(formik.isSubmitting); // always prints false
    console.log(formik.isValidating); // always prints false
    const errors = {};
    if (!values.name) {
      errors.name = 'Required';
    }

    if (Object.keys(errors).length > 0 && formik.isSubmitting) {
        Swal.fire({
            icon: 'error',
            title: "Oops. . .",
            text: "There are errors with the form. Please double check your options.",
            footer: "<div>Problems: " + Object.keys(errors).join(', ') + "</div>"
        })
    }

    return errors;
};

const formik = useFormik({
    initialValues: {
        name: item.name
    },
    enableReinitialize: true,
    validate,
    onSubmit: values => {
       // also tried adding 
       formik.setSubmitting(true); 
       //do stuff
    }
})

but the isSubmitting / isValidating are always false. Do I need to pass in additional props to the validate function in order to access these values?

https://codesandbox.io/s/nervous-wescoff-cf2y1?file=/src/App.js



from Formik validation isSubmitting / isValidating not getting set to true

No comments:

Post a Comment