我正在尝试实施新的Google Invisible Recaptcha,由于某些原因我还不知道自动html表格验证和所需的属性似乎与Recaptcha一起工作 . 我猜这是因为onSubmit()函数回调 . 有人能告诉我如何解决这个问题吗?提前致谢 .
以下是我使用Google Invisible Recaptcha实现的表单 . 有意删除了data-sitekey .
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("contactForm").submit();
}
</script>
</head>
<body>
<form id="contactForm" action="#" method="POST">
<p>Leave a Message</p>
<label for="inputName">Name</label>
<input type="text" name="Name" id="inputName" placeholder="Name" required> <br>
<label for="inputEmail">Email</label>
<input type="email" name="Email" id="inputEmail" placeholder="Email Id" required> <br>
<label for="inputMessage">Message</label>
<input type="text" name="Message" id="inputMessage" placeholder="Message" required>
<button class="g-recaptcha" type="submit" data-sitekey="//site-key" data-badge="bottomleft" data-callback='onSubmit'>Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
2 回答
创建一个回调函数,该函数将提交按钮的onclick属性设置为onSubmit函数,然后触发单击 .
将此回调函数设置为data-callback属性
您必须以编程方式执行此操作,这要归功于新的v2 grecaptcha方法:grecaptcha.execute()以便recaptcha不会替换按钮的默认单击事件,这会阻止默认的HTML5表单验证 .
参见HTML5 form validation before reCAPTCHA's的this answer .