reactjs React表单验证:如何初始禁用提交按钮

eqoofvh9  于 2023-04-20  发布在  React
关注(0)|答案(5)|浏览(142)

下面是我使用formikReact表单验证代码。默认情况下,当表单加载时,我希望禁用提交按钮:

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}

但它实际上只有在我尝试提交表单时才起作用。因此,如果我将表单留空并点击提交,所有验证错误都会显示,然后按钮被禁用。但是,它应该从一开始就被禁用。我检查了documentation,但没有看到任何明显的东西。

qlzsbp2j

qlzsbp2j1#

如果您希望在表单加载时保持submit按钮最初禁用,则可以使用Formik的use the dirty : boolean property,如下所示:

disabled={!formik.dirty}

如果你想保持submit按钮禁用,直到所有字段值都有效,那么你可以使用isValid: boolean,它的工作原理如下:
如果没有错误(即errors对象为空),则返回true,否则返回false。
因此,您可以将其用作:

disabled={!formik.isValid}

现在,如果您希望在所有字段都有效之前禁用提交按钮,并且如果字段值已从其初始值更改,则必须结合使用上述两个属性,如下所示:

disabled={!(formik.isValid && formik.dirty)}
0lvr5msh

0lvr5msh2#

要初始禁用按钮,只需检查触摸对象是否为空,并保持这种状态,直到所有字段都通过!isValid验证

disabled={!isValid || (Object.keys(touched).length === 0 && touched.constructor === Object)}
ovfsdjhp

ovfsdjhp3#

Formik跟踪字段值和错误,但将其公开供您使用,这过去是通过使用渲染 prop 模式的formProps完成的,但现在似乎是useFormik钩子返回的formik变量的一部分。
我建议从删除常量的初始值开始。然后你需要访问formik的error对象。我没有使用新的钩子语法来完成这一点,但是,看文档,我希望“formik.errors”能起作用(这是暴露在formProps.errors使用渲染 prop ).最后提交buttion禁用应该是一个检查,要么formik.values等于初始值,或者errors对象不为空。

ldfqzlk8

ldfqzlk84#

您可以添加validateOnMount并将其设置为true

const formik = useFormik({
    validateOnMount: true, // <================= Add this
    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);
    }
  });

使用on按钮
disabled={!formik.isValid}

rekjcdws

rekjcdws5#

我在用
“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>

如果这将与相同的版本,请做一个upvote。

相关问题