谷歌重述了html 5的验证

Question

我有一个表单，其中包含HTML5验证，运行良好。当用户单击<input type="submit">时，将触发验证。

但我添加了Googlerecaptcha，验证没有链接器触发。有什么建议吗？

<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

这里有一个解决方法，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
}