javascript - 提交处理程序仅在第二次尝试时起作用

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') 在您第一次提交表单之前不会注册。第二次提交表单时，事件处理程序开始执行并执行其预期的操作。

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

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