谷歌不可见的reCaptcha + jQuery issue ()问题

Question

我已经在几个站点上成功地实现了新的谷歌的隐形reCaptcha，但是它与jQuery validate()冲突，使得js验证不再在按钮/表单提交上执行，并且reCaptcha立即启动。如果用户忘记填写一个requried表单字段，它将不得不等待服务器响应，然后下次再返回。

jQuery .validate()支持回调，但是由于它在CMS的内部类中是硬编码的，我是否可以在外部(例如从前端主题，在文档加载时，当验证代码已经呈现时)对其进行修改？

或者，另一个想法是以某种方式推迟captcha的回调，这样验证步骤就可以获得运行的机会。

谢谢!

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>

Answer 1

我也遇到了同样的问题，我终于找到了将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的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();
        }           
    }

顺序如下：

1. 当用户点击submit按钮时，jquery的submitHandler就会被调用，因为不可见的recaptcha还没有执行，所以我们调用grecaptcha.execute()。google的recaptcha验证需要几秒钟的时间，当它被完全验证时，它将调用formSubmit回调(虽然这个回调没有被调用，但我们不能将表单数据发送到服务器！)
2. 在formSubmit回调中，我们调用$('#orderform').submit强制再次输入submitHandler。
3. 再次在submitHandler中，由于grecaptcha.getResponse不是null，我们可以将表单数据发布到服务器，它将包括recaptcha隐藏字段，然后必须在服务器端验证该字段。

希望这能有所帮助。

Answer 2

在执行不可见reCaptcha之前，我遇到了类似的问题，并在特里提供的这个链接的帮助下验证了表单。

以下是几个步骤：

在表单中的submit按钮之前添加这个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。

Answer 3

从技术上讲，我们“真正”想要做的就是通过编程将挑战绑定到一个按钮上。例如：

添加此方法，我们只想执行不可见的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