Question

我在1000hz bootstrap validator开始之前使用Invisible reCaptcha和我的表单。为此，我必须使用jQuery提交处理程序。

问题是只有在单击提交按钮两次后，处理程序才能工作。在第一次单击时，表单被提交，绕过处理程序，这样就不会执行不可见的reCaptcha，当然，我收到错误。

这是表格：

<form role="form" data-toggle="validator" data-disable="true" id="contactform" method="post" action="result.php">
  <div class="form-group"><label for="InputName1">Envianos un E-mail</label><input type="text" class="form-control" name="nameofuser" placeholder="Nombre, Apellido" required>
  </div>
  <div class="form-group"><label for="InputEmail1">Email</label><input type="email" class="form-control" name="email" placeholder="Tu E-mail" required data-error="Porfavor, ingrese una dirección de Email valida.">
  <div class="help-block with-errors"></div>
  </div>
  <div class="form-group"><label for="InputName1">Mensaje</label><textarea class="form-control" rows="5" name="comment" required></textarea>
  </div>
  <div id='recaptcha' class="g-recaptcha"
    data-sitekey="6LfCKjQUAAAAAPSp2YVmv-Yv2sOIPW_gp6CLVBUj"
    data-callback="onCompleted"
    data-size="invisible">
  </div>
  <button type="submit" id="submit" style="font-size: 24px;" class="btn btn-box openSans" >Enviar</button>
</form>

这就是JS：

$("#contactform").submit(function(e) {

  $('#contactform').validator().on('submit', function (e) {
    if (e.isDefaultPrevented()) {
      // handle the invalid form...
      console.log("FORM INVALIDO");
    } else {
      // everything looks good!
      if (!grecaptcha.getResponse()) {
        console.log('captcha not yet completed.');
        event.preventDefault(); //prevent form submit
        grecaptcha.execute();
      } else {
        console.log('form really submitted.');
      }
    }
  })
});

onCompleted = function() {
    console.log('captcha completed.');
    $("#contactform").submit();
}

如果有人想查看控制台，这是一个显示问题的页面： https://ccromatica.com/contacto

Answer 1

您在提交回调中定义了一个事件处理程序。

在您首次提交表单之前，代码$('#contactform').validator().on('submit')尚未注册。第二次提交表单时，事件处理程序会启动并执行它的目的。

最简单的解决方案是将所有事件处理程序（如上所述）移出任何提交函数之外。

确保无论何时定义事件处理程序，它都会先运行，而不是仅根据其他条件进行定义。

提交处理程序仅在第二次尝试时工作

1 个答案: