jquery - Google INVISIBLE reCaptcha + jQuery validate() 问题

Question

我已经实现了新的 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>

Answer 1

我也遇到了同样的问题，我终于找到了将 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 的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. 当用户点击提交按钮时，jquery的submitHandler被调用，如下所示 不可见的 recaptcha 尚未执行，我们调用 grecaptcha.execute()。 谷歌的验证码需要几秒钟的时间来验证，什么时候 它已完全验证，它将调用 formSubmit 回调(虽然未调用此回调，但我们无法将表单数据发送到服务器!)。
2. 在formSubmit回调中我们调用$('#orderform').submit强制输入 再次提交处理程序。
3. 再次在submitHandler内部，这次是 grecaptcha.getResponse 不为空，我们可以将表单数据发送到 服务器，它将包含 recaptcha 隐藏字段，然后该字段必须 在服务器端进行验证。

希望这有帮助。