我已成功在几个站点上实现了新的Google's INVISIBLE reCaptcha，然而，它与jQuery validate（）冲突，这样就不再在按钮/表单提交上执行js验证，并且reCaptcha立即启动。如果用户忘记填写需要填写的表单字段，则必须等待服务器响应，然后再次返回。
jQuery .validate（）支持回调，但是因为它在CMS的内部类中是硬编码的，所以有一种方法我可以在某种程度上修改它（例如从前端主题，文档加载，当验证码已经呈现）？
或者，另一个想法是以某种方式推迟验证码的回调，以便验证步骤可以有机会运行。
谢谢！
jQuery验证表单:(在核心中硬编码，不能修改，除非我编辑核心文件或扩展类/克隆功能 - 不是最优的）
<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验证与隐形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的submitHandler中：
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();
}
}
顺序如下：
希望这可以帮助。
在特里提供的这个invisible reCaptcha的帮助下执行link之前，我遇到了类似的问题并验证了表格。
以下是步骤：
在表单中的提交按钮之前添加此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>
在validate方法中执行所有验证，如果所有验证都成功，则执行验证码。
我在经典的Asp.Net Core MVC模板上遇到了同样的问题。它由Unobstrusive Validation内部装饰。插入Invisible recaptcha后，验证被破坏。阅读本文，我设法使用集成验证使其工作，而无需为每个字段指定验证（由Model Class推断为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>
希望这段代码可以帮助别人
从技术上讲，我们“真正”想做的就是以编程方式将挑战绑定到按钮。例如：
添加此方法，我们只想执行不可见的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="" >
现在，“技术上”提交按钮绑定到用户的单击操作
对我有用的是使用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>