Google INVISIBLE reCaptcha + jQuery validate()问题

Question

我已经成功地在几个站点上实现了新的Google的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验证与隐形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,因为尚未执行隐形重访,我们调用grecaptcha.execute().google的recaptcha验证需要几秒钟,当它完全验证时,它将调用formSubmit回调(虽然不调用此回调,但我们无法将表单数据发送到服务器!).
2. 在formSubmit回调中,我们调用$('#orderform').submit to force再次输入submitHandler.
3. 里面submitHandler再次,这次作为grecaptcha.getResponse不为空,我们可以将窗体数据发送到服务器,它将包括的ReCaptcha隐藏字段,然后必须要在服务器端验证.

希望这可以帮助.

Answer 2

我有类似的问题,并在执行前验证的形式无形验证码与此的帮助链接由特里提供.

以下是步骤:

在表单中的提交按钮之前添加此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方法中执行所有验证,如果所有验证都成功,则执行验证码.