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