在重新验证码之前的HTML5表单验证
在重新验证码之前的HTML5表单验证
提问于 2017-01-16 04:28:42
我集成了新的隐藏reCAPTCHA (v2)框架，默认情况下，它使用submit按钮的click事件验证用户。但此事件在内置HTML5表单验证之前触发。我正在寻找一种方法，使它在预期的顺序:表单验证首先，reCAPTCHA之后。
回答 3
Stack Overflow用户
发布于 2017-05-04 23:28:54
嗨，这里有一个有效的解决方案。使用不可见的Recaptcha。
jQuery(document).ready(function() {
var commentform = jQuery("#commentform");
commentform.on("click", "#submit-comment", function(e) {
if(commentform[0].checkValidity()) {
e.preventDefault();
grecaptcha.execute();
}
});
});
function submitCommentForm(data) {
document.getElementById("commentform").submit();
}<form action="blaba.php" method="post" id="commentform" class="comment-form">
<div class="form-submit">
<div data-callback="submitCommentForm" data-sitekey="yourkey" class="g-recaptcha" data-size="invisible">
<button id="submit-comment">Leave a comment</button>
</div>
</form>
Stack Overflow用户
发布于 2019-02-05 20:25:25
我遇到了这个问题，因为默认方法似乎覆盖了html5表单验证。我还希望所有代码都是泛型的，而不是硬编码任何函数/元素名称。最后，我使用v3应用编程接口编写了以下代码：
HTML
<form method="post" action="?" class="ui-recaptcha" name="my_form_name">
...
<input type="submit" value="Submit">
</form>
<script src="//www.google.com/recaptcha/api.js?render={key}" async defer></script>Javascript (我使用的是jQuery，但很容易适应普通的js)
$('.ui-recaptcha').submit(e => {
var form = e.target;
if( $(form).data('recaptcha-done') )
return;
e.preventDefault();
grecaptcha.execute('{key}', {'action': $(form).attr('name')}).then(token => {
$(form).append($('<input>').attr({'type': 'hidden', 'name': 'g-recaptcha-response', 'value': token}));
$(form).data('recaptcha-done', true);
$(form).submit();
});
});我发现在上面的一些例子中，仅仅调用submit就会导致一个循环，这是有意义的，因为recaptcha处理程序在submit事件上运行。
这将为任何ui-recaptcha表单运行recaptcha，将表单name属性作为可以在reCaptcha控制台中看到的操作传递，然后将令牌插入到表单中。一旦运行，它就会在表单上设置一个数据属性，这样提交的递归调用就不会再次尝试运行recaptcha。
Stack Overflow用户
发布于 2018-08-19 14:49:10
let siteKey = "...";
$("form").submit(function (eventObj) {
var myForm = this;
eventObj.preventDefault();
grecaptcha.execute( siteKey, {
action: "submit"
})
.then(function (token) {
$('<input />').attr('type', 'hidden')
.attr('name', "g_recaptcha_response")
.attr('value', token)
.appendTo(myForm);
myForm.submit();
});
});这将执行recapcha，等待响应，在浏览器尝试提交表单时将隐藏的属性g_recaptcha_response添加到表单，然后实际提交表单。您需要全局变量siteKey
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41665935
复制相关文章
相似问题