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

Question

在Invisible reCaptcha 启动之前，我将1000hz bootstrap validator 与我的表单一起使用。为此，我必须使用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') 在您首次提交表单之前不会被注册。当您第二次提交表单时，事件处理程序就会开始行动并执行它应该做的事情。

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

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