La fonction Formik onSubmit ne fonctionne pas sur mon code

Question

Je crée un formulaire en utilisant react et formik, voici mon 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>

Dans ce formulaire formik, la fonction onSubmit ne fonctionne pas. Je ne sais pas pourquoi ? S'il vous plaît dites-moi les gars quel est le problème avec mon code ?

Answer 1

Vérifiez votre validationSchema . J'ai rencontré ce problème et j'ai découvert que mon validateur retournait quelque chose qui signalait à Formik que le formulaire était invalide, mais aucun autre avertissement ou message n'apparaissait. Le formulaire ne se soumettait tout simplement pas.

Remplacez cet accessoire par validator={() => ({})} c'est-à-dire qu'un objet vide est simplement renvoyé. Cela devrait passer la validation et déclencher votre onSubmit. Vous pouvez restaurer votre fonctionnalité à partir de là.

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

Answer 2

Dans mon cas, j'utilise Yup comme validateur et j'ai accidentellement eu firstName y lastName dans mon validationSchema comme requis mais je n'avais pas ces valeurs dans mon formulaire.

Mon validationSchema était,

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')
}) 

Je viens de supprimer firstName y 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')
})

Vérifiez donc votre validationSchema et voir si vous avez besoin de quelque chose qui n'existe pas dans votre formulaire.

Answer 3

Dans mon cas, onSubmit ne fonctionnait pas parce que j'avais oublié d'envelopper mon formulaire dans la balise <form></form> tag. C'est un problème stupide, mais il peut être à l'origine de ce comportement. Si les solutions ci-dessus ne fonctionnent pas, vérifiez que vous disposez de la balise formulaire étiquette.

Answer 4

Utilisez à la place de la balise bouton comme je l'ai fait pour moi.