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

【问题标题】：How to check if form is valid on submit in react formik如何检查表单在react formik中提交时是否有效
【发布时间】：2019-09-10 23:39:29
【问题描述】：

我在我的项目中使用了 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);
}

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

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

【问题讨论】：

您不必在submitForm 方法中进行验证！
你定义了 CRYP_LOGIN_SCHEMA 吗？
是的...在单个 js 文件中
jaredpalmer.com/formik/docs/guides/… 。在这里，您可以找到执行 form validation 、 field validation 或手动触发验证的方法。没有帮助？

标签： reactjs forms validation formik yup

【解决方案1】：

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

我用的是"formik": "^2.1.4"的版本

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

【讨论】：