2

我在我的项目中使用了 formik 库。还使用 yup 库进行表单字段验证。我想在提交方法连接到 api 之前检查表单是否有效。下面是我在项目中使用的代码。

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

我在提交事件中使用的方法如下：

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

我想在上述方法中检查表单是否有效。

请提供解决方案来完成它。提前致谢。

4

1 回答 1

2

无需在提交时验证表单的快速解决方案 是将initialErrors属性设置为初始值initialErrors ={InitialValues}（isValid验证（email: Yup.string().label('Email').email().required()）。

我正在使用版本"formik": "^2.1.4"

注意：这只是众多方法中的一种

于 2020-04-27T11:29:22.280 回答