Formik form not submitting and reCAPTCHA error message keeps popping up

Question

I have this project I am working on. The form was working before I added React reCAPTCHA but now, the form is not submitting and reCAPTCHA keeps showing the error message after being checked and submit button is clicked on.

Here is the code:

 

    const validationSchema = yup.object().shape({
        name: yup.string().required('Your name is required.'),
        email: yup.string().email('Please enter a valid email address.').required('Email is required'),
        comment: yup.string().required('No comment entered yet.'),
        recaptcha: yup.string().required('Confirm that you are human.'),
      });
    
      const {
        'article-comment-name': name,
        'article-comment-email': email,
        'article-comment-comment': commentInput,
        'article-comment-submit': submit,
      } = keyBy(commentForm?.form?.inputs, KEY);
      return (
        <div>
          <p className="text text-success text-center">{msg && <p>Your comment has been added.</p>}</p>
          <Formik
            initialValues={formInitialValues}
            onSubmit={(comment, { resetForm }) => {
              handleVerify();
              submitComment(comment);
              resetForm();
              commentCreated();
            }}
            validationSchema={validationSchema}
          >
            {({ values: comment, handleChange, handleSubmit, errors, touched }) => (
              <form id="add-comment" className="add-comment" onSubmit={handleSubmit}>
                <fieldset>
                  <div className="row">
                    <div className="col-md-6">
                      <label>
                        {name.label}:{' '}
                        <span className="text-danger">
                          {errors.name && touched.name && errors.name}
                        </span>
                      </label>
                      <input type="text" name="name" value={comment.name} onChange={handleChange} />
                    </div>
                    <div className="col-md-6">
                      <label>
                        {email.label}:{' '}
                        <span className="text-danger">
                          {errors.email && touched.email && errors.email}
                        </span>
                      </label>
    
                      <input type="text" name="email" value={comment.email} onChange={handleChange} />
                    </div>
                  </div>
                  <div>
                    <label>
                      {commentInput.label}:{' '}
                      <span className="text-danger">
                        {errors.comment && touched.comment && errors.comment}
                      </span>
                    </label>
                    <textarea
                      name="comment"
                      cols={40}
                      rows={3}
                      value={comment.comment}
                      onChange={handleChange}
                    ></textarea>
                  </div>
                  <Recaptcha
                    sitekey="mysitekey"
                    verifyCallback={handleVerify}
                    render="explicit"
                  />
                  <span className="text-danger">{verify && touched.recaptcha && errors.recaptcha}</span>
                </fieldset>
                <br />
                <button type="submit" className="theme-btn">
                  <span>{submit.label}</span>
                </button>
                <div className="clearfix"></div>
              </form>
            )}
          </Formik>
        </div>

I have checked the callback and It's working fine on that end. The main problem is that the form is not submitting. It keeps showing this message as stated: Confirm that you are human.

What could be the issue?

score 1 · Answer 1 · answered May 24 '21 at 12:13

In Formik setting the values or errors are all binded with the name prop. The name prop of an element should match with one of the keys with the values . You have validationSchema for recaptcha but it is not associated with your Recaptcha component.

 <Recaptcha
     sitekey="mysitekey"
     verifyCallback={handleVerify}
     render="explicit"
  />

Submission in formik triggers a series of events . Please read this Formik Form Submission

Formik form not submitting and reCAPTCHA error message keeps popping up

1 Answers1