[英]React formik form validation: How to initially have submit button disabled
下面是我使用formik
React
表单验证代码。 默认情况下,当表单加载时,我想禁用提交按钮:
import { useFormik } from "formik";
import * as Yup from "yup";
const formik = useFormik({
initialValues: {
firstName: "",
lastName: "",
email: ""
},
validationSchema: Yup.object({
firstName: Yup.string()
.max(15, "Must be 15 characters or less")
.min(3, "Must be at least 3 characters")
.required("Required"),
lastName: Yup.string()
.min(3, "Must be at least 3 characters")
.max(20, "Must be 20 characters or less")
.required("Required"),
email: Yup.string()
.email("Invalid email address")
.required("Required")
}),
onSubmit: values => {
handleSubmit(values);
}
});
我试图在我的按钮上使用它:
disabled={!formik.isValid}
但只有当我尝试提交表单时它才真正有效。 所以,如果我将表单留空并点击提交,所有验证错误都会显示出来,然后按钮被禁用。 但是,它应该从一开始就被禁用。 我检查了文档,但没有看到任何明显的东西。
如果您想在表单加载时最初禁用submit
按钮,您可以使用Formik
的dirty : boolean
属性,如下所示:
disabled={!formik.dirty}
如果您想在所有字段值都有效之前禁用submit
按钮,那么您可以使用isValid: boolean
,其工作方式如下:
如果没有错误(即错误对象为空),则返回 true,否则返回 false。
因此,您可以将其用作:
disabled={!formik.isValid}
现在,如果您希望在所有字段都有效之前禁用提交按钮,并且如果字段值已从其初始值更改,那么您必须结合使用上述两个属性,如下所示:
disabled={!(formik.isValid && formik.dirty)}
要最初禁用按钮,只需检查触摸对象是否为空并保持这种方式,直到所有字段都使用!isValid
进行验证
disabled={!isValid || (Object.keys(touched).length === 0 && touched.constructor === Object)}
Formik 会跟踪字段值和错误,但会公开它们供您使用,这曾经是通过 formProps 使用渲染道具模式完成的,但现在似乎是 useFormik 钩子返回的 formik 变量的一部分。
我建议首先将初始值删除为常量。 然后你需要访问formik的错误对象。 我没有使用新的钩子语法来完成这个,但是,查看我希望“formik.errors”能够工作的文档(这在 formProps.errors 中使用渲染道具公开)。 最后,禁用提交按钮应该检查 formik.values 是否等于初始值或错误对象不为空。
您可以添加validateOnMount
并将其设置为 true
const formik = useFormik({
initialValues: {
validateOnMount: true, // <================= Add this
firstName: "",
lastName: "",
email: ""
},
validationSchema: Yup.object({
firstName: Yup.string()
.max(15, "Must be 15 characters or less")
.min(3, "Must be at least 3 characters")
.required("Required"),
lastName: Yup.string()
.min(3, "Must be at least 3 characters")
.max(20, "Must be 20 characters or less")
.required("Required"),
email: Yup.string()
.email("Invalid email address")
.required("Required")
}),
onSubmit: values => {
handleSubmit(values);
}
});
在按钮上使用
disabled={!formik.isValid}
我正在使用
"formik": "^2.2.6"
就我而言,我是这样做的。 我没有兴趣在初始时显示验证消息中的消息,所以我这样做了。
我正在使用基于类的组件
<Formik
......
validateOnBlur={true}
validateOnChange={true}
{({handleChange, values, touched, errors, handleBlur }) => (<>
..........
<Form.Control
placeholder="Name"
type="text"
name="field_dba"
value={values.name}
onChange={handleChange}
onFocus={handleBlur} // It plays a role to change the touched property
isInvalid={touched.name && !!errors.name}
isValid={!errors.name}
className="form-input"
/>
<label className="modal-lab">Name *</label>
// Here i'm checking the field is touched or not
{touched.name ? <Form.Control.Feedback type="invalid" className="text-capitalize"> {errors.name} </Form.Control.Feedback> : null}
最后禁用按钮,直到全部验证。 我正在使用这个
<button disabled={Array.isArray(errors) || Object.values(errors).toString() != ""} type="submit"> Submit </button>
如果这适用于相同的版本,请点赞。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.