如何检查表单在提交时是否有效？

Question

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

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

请提供解决方法来完成它。先谢谢你了。

Answer 1

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

我现在使用的版本是 "formik": "^2.1.4"

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