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

Viewed 7637

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.stack.imgur.com/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>
                .....
1 Answers

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>
    
Related