Question

我试图从使用Google reCaptcha v2迁移到隐形reCaptcha。我使用Parsley.js进行表单验证，并使用Malsup Ajax表单插件提交表单。我目前的代码如下：

HTML：

<form action="send1.php" method="post" class="contact_form">        
<label for="name_1">Name</label>
<input type="text" name="name_1" id="name_1" value="" required />
<div class="g-recaptcha" data-sitekey="XXX"></div>
<input type="submit" class="button" value="">
</form>

JS：

$('.contact_form').parsley();
$('.contact_form').submit(function(){
    if($('.contact_form').parsley().validate()){
        $('.contact_form').ajaxSubmit(); 
    }
    return false;
});

这成功地将g-recaptcha-response传递给send1.php，其中验证了reCaptcha。

如何将Invisible reCaptcha与此脚本集成？

我试过用这个：

    <div id='recaptcha' class="g-recaptcha"
          data-sitekey="XXX"
          data-callback="onSubmit"
          data-size="invisible"></div>
 </div>

但我不确定如何使用数据回调。如果我添加

grecaptcha.execute();

在ajaxSubmit（）之前，字段g-recaptcha-response被添加到Ajax调用中，但它的值是空白的......

请帮忙吗？

Answer 1

（我从here复制了答案）

对于ParsleyJS，您需要做一些解决方法：

1.添加隐藏的输入字段，data-parsley-required="true"，value = ""，如下所示：

<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">

2.添加错误容器（位于g-recaptcha div下方或下方）：

<span id='errorContainer'></span>

3.在你的js代码中的某处添加这个简单的函数：

function recaptchaCallback() {
    document.getElementById('myField').value = 'nonEmpty';
}

4.使用自定义函数的值添加属性data-callback：

<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>

Answer 2

我将与您分享我如何让ParsleyJS和Invisible reCaptcha为我工作。以下是我使用的代码。这只是POC代码，而不是生产;我没有做AJAX帖子。请原谅任何丑陋，因为我不得不剥掉很多绒毛：

<!DOCTYPE html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="../node_modules/parsleyjs/dist/parsley.min.js"></script>
    </head>

    <body>
        <form action="#" data-parsley-validate class="js-validate">
            <div>
                <label for="input-first-name">First Name*</label>
                <input
                    type="text"
                    id="input-first-name"
                    name="first-name"
                    data-parsley-trigger="blur"
                    data-parsley-error-message="First Name is required"
                    required>
            </div>
            <div>

                <label for="input-last-name">Last Name*</label>
                <input
                    type="text"
                    name="last-name"
                    id="input-last-name"
                    data-parsley-trigger="blur"
                    data-parsley-error-message="Last Name is required"
                    required>
            </div>
            <div>   
                <button type="submit" id="theSubmitBtn">Submit</button> 
            </div>      

            <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>
            <script>
                function onScriptLoad() {
                    var htmlEl = document.querySelector('.g-recaptcha');

                    var captchaOptions = {
                        sitekey: 'Your_Site_Key',
                        size: 'invisible',
                        callback: function (token) {
                                $('.js-validate').submit();
                                console.log('test:   ',token);
                            }
                    };

                    recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, false);

                    $('#theSubmitBtn').click(function(e){
                        e.preventDefault();

                        if(grecaptcha.getResponse() != ''){
                            grecaptcha.reset();
                        }
                        grecaptcha.execute();
                    });
                }
            </script>
            <div id='recaptcha' class="g-recaptcha"></div>

        </form> 
    </body>
</html>

因此，如果你想通过AJAX提交，你可以添加一个ParsleyJS事件监听器并以这种方式进行Ajax调用。

$('.js-validate').parsley().on('form:submit', function() {
    //AJAX post here    
    return false;
});

我的解决方案主要基于这篇文章（因此归功于他）： Invisible google Recaptcha and ajax form

希望它有所帮助，因为我也寻找了一段时间的解决方案。

Answer 3

我希望这会帮助你，我还没有处理过欧芹，但是reCaptcha与它的整合方式应该是一样的。如果您有任何问题，请告诉我们！

我使用这样的方法来渲染我的reCaptchas。这允许您在同一页面上拥有多个验证码，以及验证。

对于表单验证，我已将您的欧芹验证添加到以下函数中。请注意，如果验证返回false，我们重置验证码......这很重要。如果没有发生，则无法重新提交表单。

function renderRecaptcha() {
    for (var i = 0; i < document.forms.length; ++i) {
        var form = document.forms[i];
        var button = form.querySelector('[data-sitekey]');
        if (null === button) {
            continue;
        }

        (function (frm) {
            var sitekey = button.getAttribute("data-sitekey");
            var buttonId = grecaptcha.render(button, {
                "sitekey": sitekey,
                "size": "invisible",
                "badge": "inline",
                "callback": function (recaptchaToken) {
                    if ($(frm).parsley().validate()) {
                        $(frm).ajaxSubmit();
                        // HTMLFormElement.prototype.submit.call(frm);
                    } else {
                        grecaptcha.reset(buttonId);
                    }
                }
            });

            frm.onsubmit = function (evt) {
                evt.preventDefault();
                grecaptcha.execute(buttonId);
            };
        })(form);
    }
}

您的按钮将是sitekey而不是div。这简化了很多事情。

<button type="submit" class="common-form__submit" data-sitekey="SITEKEY_HERE">Send Your Request</button>

reCaptcha隐形，欧芹和ajax形式

3 个答案: