Question

我在项目中使用了formik库。还使用yup库进行表单字段验证。我想先检查表单是否有效，然后再在Submit方法上连接到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);
}

我想检查上述方法中的表格有效还是无效。

请提供解决方案来完成它。预先感谢。

Answer 1

一种无需在提交时验证表单的快速解决方案是将initialErrors属性设置为“初始值” （initialErrors ={InitialValues}）并使用isValid值启用“提交”按钮，还请确保您在Yup模式验证中将所需字段标记为必填（email: Yup.string().label('Email').email().required()）。

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

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

如何在reform formik中检查表单在提交时是否有效

1 个答案: