How to check if form is valid on submit in react formik

Question

I have used the formik library in my project. Also used yup library for form field validations. I want to check whether the form is valid or not before connecting to api on submit method. Below is my code used in my project.

<Formik
                    isInitialValid = {false}
                    initialValues={this.formData}
                    validationSchema={CRYP_LOGIN_SCHEMA}
                    onSubmit={this.loginSubmit.bind(this)}>
                    {({ errors, status, touched, isValid }) => (
                        <Form  className="login_reg_form">
                            <div className="input_control_wrp mb-4">
                                <div className="input_control">
                                    <span className="left_icon"><i className="fas fa-user"></i></span>
                                    <Field placeholder="Enter your Email" name="email" />
                                </div>
                                {errors.email && touched.email && <span className="mt-1 input_error">{errors.email}</span>}
                            </div>

                            <div className="input_control_wrp mb-2">
                                <div className="input_control">
                                    <span className="left_icon"><i className="fas fa-key"></i></span>
                                    <Field type={this.state.pwdType} placeholder="Enter your Password" name="password" />
                                    <a
                                     onClick={this.togglePwdType.bind(this)}
                                     href="javascript:void(0)"
                                     className="right_icon">
                                        <i className={this.state.pwdType == 'password' ? 'fas fa-eye' : 'fas fa-eye-slash'}></i>
                                     </a>
                                </div>
                                {errors.password && touched.password && <span className="mt-1 input_error">{errors.password}</span>}
                            </div>
                            <div className="forgot_pwd_link mb-4">
                                <a href="javascript:void(0)" className="">Forgot password?</a>
                            </div>

                            <div className="input_submit">
                                <button className={ !isValid ? 'disabled_btn' : '' } type="submit">Sign In</button>
                            </div>

and my method used on submit event is below:

loginSubmit(values,formikBag) {
    console.log('formikBag',formikBag);
}

I want to check if the form is valid or invalid inside the above method.

Kindly, provide solution to accomplish it. Thanks in advance.

Answer 1

A quick solution where you do not have to validate the form on submitting is to set the initialErrors property to the Initial Values ( initialErrors ={InitialValues} ) and use the isValid value to enable the Submit button, also be sure that you mark your required field as required in your Yup schema validation (email: Yup.string().label('Email').email().required()).

I'm using the version "formik": "^2.1.4"

Note: This is just one approach of many