Question

我有一个带有HTML 5验证的表单，可以正常工作。当用户单击<input type="submit">时，将触发验证。

但是我将Google recaptcha添加到了它，验证没有触发链接器。有什么建议吗？

<input type="submit" class="g-recaptcha btn btn-info pull-right" data-sitekey="*`***************************************" data-callback="YourOnSubmitFn">

<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function YourOnSubmitFn(token) {
  document.getElementById('contact').submit();
}
</script>

Answer 1

有一种解决方法here，该问题也在github中进行了讨论。

使用jquery的解决方法：

JS ：

$('#form-contact').submit(function (event) {
    event.preventDefault();
    grecaptcha.reset();
    grecaptcha.execute();
  });

function formSubmit(response) {
  // submit the form which now includes a g-recaptcha-response input
}

HTML ：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="?">
  <div class="g-recaptcha" 
       data-sitekey="your-key"
       data-size="invisible"
       data-callback="formSubmit">
  </div>
  <button type="submit">Submit</button>
</form>

在纯JS中，您可以通过这种方式收听表单提交：

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

Google的验证码破坏了HTML 5验证

1 个答案: