我成功地在多个站点上实现了新的Google的隐形recaptcha，但是它与jQuery validate（）冲突，以使JS验证不再在按钮/表单上执行，并立即重新启动。如果用户忘记填写重新填写的表单字段，则必须等待服务器响应，并下次返回。
jQuery .Validate（）支持回调，但是由于它在CMS的内部类中进行了刻板编码，所以有一种方法可以以某种方式对其进行以某种方式修改它加载，验证代码已经渲染时）？
或者，另一个想法是以某种方式推迟验证码的回调，以便验证步骤可以有机会运行。
谢谢！
jQuery validate表单：（在核心中进行硬编码，除非我编辑核心文件或扩展class/clone函数 - 不是最佳）
<script type="text/javascript">
$(document).ready(function(){
$("form[name=comment_form]").validate({
rules: {
body: {
required: true,
minlength: 1
},
authorEmail: {
required: true,
email: true
}
},
wrapper: "li",
errorLabelContainer: "#comment_error_list",
invalidHandler: function(form, validator) {
$('html,body').animate({ scrollTop: $('#comment_error_list').offset().top }, { duration: 250, easing: 'swing'});
},
submitHandler: function(form){
$('button[type=submit], input[type=submit]').attr('disabled', 'disabled');
form.submit();
}
});
});
</script>
recaptcha显式渲染：
<script type='text/javascript'>
var renderInvisibleReCaptcha = function() {
for (var i = 0; i < document.forms.length; ++i) {
var form = document.forms[i];
var holder = form.querySelector('.invisible-recaptcha');
if (null === holder) continue;
(function(frm){
var holderId = grecaptcha.render(holder, {
'sitekey': 'my-key-here',
'badge': 'inline',
'size': 'invisible',
'callback': function (recaptchaToken) {HTMLFormElement.prototype.submit.call(frm);},
'expired-callback': function(){grecaptcha.reset(holderId);}
});
frm.onsubmit = function (evt){evt.preventDefault();grecaptcha.execute(holderId);};
})(form);
}
};
</script>
我遇到了相同的问题，我终于找到了将jQuery validate与隐形recaptcha集成的正确方法。这是这里提出的解决方案的混合。
首先，html部分：
<div class="g-recaptcha" data-sitekey="<your key here>"
data-size="invisible"
data-callback="formSubmit">
</div>
然后，您必须以这种方式实现recaptcha回调：
function formSubmit(response) {
// submit the form which now includes a g-recaptcha-response input
$("#orderform").submit();
return true;
}
最后，棘手的部分是在jQuery Validate的substandler中：
submitHandler: function (form) {
if (grecaptcha.getResponse()) {
// 2) finally sending form data
form.submit();
}else{
// 1) Before sending we must validate captcha
grecaptcha.reset();
grecaptcha.execute();
}
}
序列如下：
- 当用户命中提交按钮时，jQuery的substandler被称为尚未执行无形的recaptcha，我们称grecaptcha.execute（）。Google的recaptcha需要几秒钟才能验证它已完全验证，它将调用formsubmit回调（虽然未调用此回调，但我们无法将表单数据发送到服务器！）。
- 在formubmit回调中，我们称为$（'＃orderform'）。提交强制输入subsithandler再次。
- 再次在subsithandler内部，这次是grecaptcha.getResponse不是零，我们可以将表单数据发布到服务器，它将包括recaptcha隐藏字段，然后必须在服务器端进行验证。
希望这会有所帮助。
我有类似的问题，并在Terry提供的此链接的帮助下验证了表格。
这是一个步骤：
在您的表格中的提交按钮之前添加此div
<div id='recaptcha' class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onSubmit"
data-size="invisible"></div>
也更新您的密钥。表格闭合添加此方法
之后<script>onload();</script>
在您的表格添加此代码
之前<script>
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("You must add text to the required field");
} else {
grecaptcha.execute();
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
在验证方法中进行所有验证，如果所有验证成功，请执行CAPTCHA。
从技术上讲，我们"真正"要做的就是将挑战绑定到按钮。例如：
添加此方法，我们只想执行隐形grecaptcha而不是"真实"验证
jQuery.validator.addMethod("iv_recapcha_valid", function(value, element) {
return grecaptcha.execute();
}, 'No message needed, grecaptcha excecuted');
然后将此规则添加到您的现有规则
rules: { gRecaptchaResponse: { iv_recapcha_valid: true } }
添加一个隐藏的字段
<input type="hidden" name="gRecaptchaResponse" value="" >
现在，"从技术上讲"提交按钮绑定到用户的单击操作
https://developers.google.com/recaptcha/docs/invisible
我在经典ASP.NET Core MVC模板上也有相同的问题。它是由不受欢迎的验证内部装饰的。插入无形的recaptcha后，验证被打破了。阅读本文，我设法使用集成验证使其正常工作，而无需为每个字段指定验证（由模型类推断为MVC项目）
html页面：
<input type="hidden" name="gRecaptchaResponse" id="gRecaptchaResponse" value="" />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div id='recaptcha' class="g-recaptcha"
data-sitekey="@_configuration["InvisibleRecaptcha:SiteKey"]"
data-callback="SubmitRegistration"
data-size="invisible"></div>
<button type="submit" id="SubmitButton" class="btn btn-primary"> Invia</button>
</div>
</div>
JavaScript代码：
<script>
function onload() {
var element = document.getElementById('SubmitButton');
element.onclick = validate;
}
onload();
function validate(event) {
event.preventDefault();
$("#Form").validate();
var isFormValid = $("#Form").valid();
if (isFormValid) {
grecaptcha.execute();
}
}
function SubmitRegistration(data) {
if ($("#gRecaptchaResponse").val() == '') {
$("#gRecaptchaResponse").val(data);
}
document.getElementById("Form").submit();
}
</script>
希望此代码可以帮助某人
对我有用的是使用jQuery选择表单（我一直在使用getElementById），然后"返回true"。因此，而不是这个：
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("frm").submit();
}
</script>
<button class="g-recaptcha btn btn-block btn-primary" data-sitekey="<YOUR_KEY>" data-callback='onSubmit'>Submit</button>
使用此：
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
$("#frm").submit();
return true;
}
</script>
<button class="g-recaptcha btn btn-block btn-primary" data-sitekey="<YOUR_KEY>" data-callback='onSubmit'>Submit</button>
我在使用.NET Razor页面时遇到了此操作，该页面默认使用jQuery验证。上面的大多数解决方案手动呼叫验证码。我想使用自动绑定到按钮方法。这将导致CAPTCHA首先运行，如果我们成功获得了验证码令牌，那么我将运行jQuery验证并可能提交表格。默认情况下，这种自动绑定方法打破了jQuery验证触发。
将按钮设置为CAPTCHA
<button type="submit" class="btn primary-btn g-recaptcha h-100"
data-callback='onSubmit'
data-sitekey='@Model.CaptchaKey'
data-error-callback="onCaptchaError"
data-badge="inline"
data-action='submit'>
Submit <i class="fas fa-chevron-right"></i>
</button>
处理成功/失败
的验证码事件<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function onSubmit(token) {
//Once we get a valid Captcha code, let's verify the form's unobtrusive validation
$("#your-form-id").validate();
var validationResult = $("#your-form-id").valid();
if (validationResult) {
//If we are valid, submit! Otherwise errors will show and we don't want to submit
document.getElementById("your-form-id").submit();
}
}
function onCaptchaError() {
alert("We had some trouble accessing captcha resources. Please refresh the page and try again.");
}
</script>
额外的信用：样式验证码徽章确保您遵循Google的政策
.grecaptcha-badge {
visibility: hidden;
}