Formik onSubmit function is not working on my code

Question

I am creating a form by using react and formik.Below is my code:

<div>
  <Formik
    initialValues={{
      email: ""
    }}
    onSubmit={(values: FState, setSubmitting: any) => {
      console.log("Enter in submit function", values);
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 500);
    }}
    validationSchema={validationSchemaGlobal}
  >
    {({
      errors,
      touched,
      handleBlur,
      handleChange,
      isSubmitting,
      values,
      handleSubmit
    }: any) => (
      <div>
        <Cards>
          <form onSubmit={handleSubmit}>
            <CardBody>
              <h4>
                Enter Your Email Address and we'll send you a link to reset your
                password
              </h4>
              <Field
                type="text"
                id="email"
                value={values.email}
                component={CustomInput}
                onChange={handleChange}
                onBlur={handleBlur}
              />
              {errors.email && touched.email ? (
                <div style={{ color: "red" }}>{errors.email}</div>
              ) : null}
            </CardBody>
            <CardFooter>
              <br />
              <button type="submit" disabled={isSubmitting}>
                Send Password Reset Link
                {/* {isSubmitting && <i className="fa fa-sponner fa-spin"/>} */}
              </button>
            </CardFooter>
          </form>
        </Cards>
      </div>
    )}
  </Formik>
</div>

In this formik form, onSubmit function not working. I dont know why? Please tell me guys what is problem with my code?

Answer 1

在我的情况下，我Yup用作验证器，我不小心在我的要求中使用了firstName和lastName，validationSchema但我的表单中没有这些值。

我的validationSchema是，

const SignupSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  lastName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  email: Yup.string()
    .email('Invalid email')
    .required('Required'),
  password: Yup.string()
    .min(6, 'Password must be at least 6 characters')
    .max(24, 'Password can be maximum 24 characters')
    .required('Required')
}) 

我刚刚删除firstName和lastName，

const SignupSchema = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email')
    .required('Required'),
  password: Yup.string()
    .min(6, 'Password must be at least 6 characters')
    .max(24, 'Password can be maximum 24 characters')
    .required('Required')
})

所以检查你的validationSchema，看看你是否需要你的表格中不存在的东西。

Answer 2

我从而不是导入Form，react-bootstrap所以formik我遇到了这个问题。Form通过导入的解决了该问题formik。有时，直接使用Form.Controlreact-bootstrap而不是Fieldformik也会出现这个问题。

如果你确实必须使用Form.Control你可以使用renderprop.

Answer 3

检查您的validationSchema。我遇到了这个问题，发现我的验证器正在向Formik发送信号，表明该表单无效，但是没有其他警告或消息出现。它只是不会提交。

用validator={() => ({})}仅返回一个空对象代替该道具。那应该通过验证并触发您的onSubmit。您可以从那里恢复功能。

  <Formik
    initialValues={{
      email: ""
    }}
    onSubmit={() => { console.log("submit!"); }}
    validator={() => ({})}
  >
    {/* */}
  </Formik>

Answer 4

最初的问题有点晚了，但我遇到了同样的问题，并且很容易解决，但很难找到。

当我将“name”属性传递给组件时，我写了“DateOfBirth”而不是小写，这意味着它与我的validationSchema不匹配。

我的架构如下所示：

export const userSchema = yup.object().shape({
firstName: yup.string().min(1).max(50).required('Field is required'), 
lastName: yup.string().min(1).max(50).required('Field is required'), 
dateOfBirth: yup.date().required('Invalid input'),});

这意味着组件的名称必须匹配

之前（不起作用）：

 <DateTimePicker name="DateOfBirth" label="Date of birth" />

之后（工作）：

<DateTimePicker name="dateOfBirth" label="Date of birth" />

Answer 5

就我而言，onSubmit不起作用，因为我忘记将表单包装在<form></form>标签中。这是一个愚蠢的问题，但这可能是这种行为的原因。如果上述解决方案不起作用，请检查您是否具有表单标记。