Must double click to submit html form (no Ajax)

  contact-form, javascript, jquery, validation

I am using recaptcha v3 and have some javascript validation. The problem I am having is that if I click on submit, it seems like nothing happened but something does happen because I receive my console.log messages saying that recaptcha validated. Then if I click again, the form sends successfully. I am not sure how to fix this odd behaviour. I am not using Ajax (at least not that I can tell anyway). If anyone can help me with this, I would sure appreciate it. Here is the code.

I have the recaptcha api script at the top of the html page.

my form has the post method and action = "contactform.php"
Here is my recaptcha button:

<div class="form-group">
                <div
                  class="g-recaptcha"
                  id="recaptcha"
                  data-sitekey="site-key data is here"
                  data-callback="onCompleted"
                ></div>
                <button
                  style="float: left; margin-bottom: 30px"
                  type="submit"
                  id="send"
                  class="wpcf7-form-control wpcf7-submit mt-3 btn btn-dark"
                  name="submit"
                >
                  ENVIAR</button
                ><span class="ajax-loader"></span>
              </div>

Here is my form validation (which works so no problem there).

<script>
      $('input[type="email"]')
        .on('invalid', function () {
          return this.setCustomValidity(
            'Por favor ingresa una dirección de correo válida.'
          );
        })
        .on('input', function () {
          return this.setCustomValidity('');
        });
      $('input[type="tel"]')
        .on('invalid', function () {
          return this.setCustomValidity(
            'Por favor introduce un número válido de teléfono'
          );
        })
        .on('input', function () {
          return this.setCustomValidity('');
        });
      $('input[type="name"]')
        .on('invalid', function () {
          return this.setCustomValidity(
            'Por favor introduce su nombre completo'
          );
        })
        .on('input', function () {
          return this.setCustomValidity('');
        });
      $('input[type="empresa"]')
        .on('invalid', function () {
          return this.setCustomValidity(
            'Por favor introduce el nombre de su empresa'
          );
        })
        .on('input', function () {
          return this.setCustomValidity('');
        });
      $('input[type="message"]')
        .on('invalid', function () {
          return this.setCustomValidity('Por favor introduce su mensaje');
        })
        .on('input', function () {
          return this.setCustomValidity('');
        });
    </script>

And here is the recaptcha v3 validation:

<script>
      $('#contactform').submit(function (event) {
        console.log('Validation Completed');
        if (!grecaptcha.getResponse()) {
          console.log('Captcha Not Yet Complete.');
          event.preventDefault();
          grecaptcha.execute();
        } else {
          console.log('form Really submitted.');
        }
      });
      onCompleted = function () {
        console.log('Captcha Completed');
        $('#contactform').submit();
      };
    </script>

Again, if anyone can help me on this I would really appreciate it. Thank you in advance.

Source: Ask Javascript Questions

LEAVE A COMMENT