How to change validateOnChange and validateOnBlur in formik to true after the first form submission?

Question

I am new to formik and been working on a signup page with lots of fields. I want to run all my validations with yup schema on submission only. Hence, I decided to change default values of validateOnChange and validateOnBlur from true to false. But now when there is an error on validation after submitting the form, even after correcting the error, the error isn't corrected and and the error message is still displayed. I want to toggle the form's behaviour to turn validateOnChange and validateOnBlur to true again after the submitCount>0 i.e after the first attempt to submit. But the syntax and moving parts of formik aren't clear to me so I am struggling to implement that.

https://i.sstatic.net/sj5It.png

      <Formik
      initialValues={{
        firstName: "",
        lastName: "",
        email: "",
        company: "",
        password: "",
        confirmPassword: "",
        billingAddress: "",
        city: "",
        postalCode: "",
        country: "",
        state: "",
        countryCode: "",
        phoneNumber: ""
      }}

      validationSchema={SignUpValidation}
      validateOnChange={false}
      validateOnBlur={false}

      onSubmit={(values, formikBag) => {
        console.log('bag', formikBag)
        setTimeout(() => {
          alert(JSON.stringify(values));
          formikBag.setSubmitting(false);
        }, 200);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <div className="row mt-5">
            <div className="col-12 col-lg-6">
              <h1 className="inner-h-sm">Personal Info</h1>
              <div className="row">
                <div className="col-12 col-lg-6">
                  <Label>First Name</Label>
                  <Field
                    type="text"
                    name="firstName"
                    component={ReactstrapInput}
                  />
                </div>
                <div className="col-12 col-lg-6">
                  <Label>Last Name</Label>
                  <Field
                    type="text"
                    name="lastName"
                    component={ReactstrapInput}
                  />
                </div>
                <div className="col-12 col-lg-12">
                  <Label>Email</Label>
                  <Field
                    type="email"
                    name="email"
                    component={ReactstrapInput}
                  />
                </div>
                <div className="col-12 col-lg-12">
                  <Label>Company</Label>
                  <Field
                    type="text"
                    name="company"
                    component={ReactstrapInput}
                  />
                </div>
                <div className="col-12 col-lg-6">
                  <Label>Password</Label>
                  <Field
                    type="password"
                    name="password"
                    component={ReactstrapInput}
                  />
                </div>
                <div className="col-12 col-lg-6">
                  <Label>Confirm Password</Label>
                  <Field
                    type="password"
                    name="confirmPassword"
                    component={ReactstrapInput}
                  />
                </div>
                .....

Answer 1

The answer by Rohit Thakur led me a working solution which still needed a slight update.

So I would suggest to also add the following line along with validateOnChange.

validateOnBlur: validateAfterSubmit

Also for the onClick method you can add preventDefault().

                                    onClick={(e: any) => {
                                        e.preventDefault();
                                        
                                        setValidateAfterSubmit(true);
                                        formik.handleSubmit();
                                    }}

Thanks and cheers !!

Answer 2

I felt the same issue - Steps -

1. Created the state.

   const [validateAfterSubmit, setValidateAfterSubmit] = useState(false);
   

2. set validateOnChange to my state.

   const formik = useFormik({
       initialValues: addressDetailsInitialValues,
       validationSchema: addressDetailsSchema,
       enableReinitialize: true,
       validateOnChange: validateAfterSubmit,
       onSubmit,
     });
   

3. On submit change the state to true.

   <Button
         variant="contained"
         color="primary"
         onClick={() => {
                     setValidateAfterSubmit(true);
                     formik.handleSubmit();
                   }}
                 >
                   Save
                 </Button>