Jquery reCaptcha隐形、欧芹和阿贾克斯形状_Jquery_Ajax_Forms_Recaptcha_Parsley.js

Jquery reCaptcha隐形、欧芹和阿贾克斯形状

jquery ajax forms

Jquery reCaptcha隐形、欧芹和阿贾克斯形状,jquery,ajax,forms,recaptcha,parsley.js,Jquery,Ajax,Forms,Recaptcha,Parsley.js,我正在尝试从使用Google reCaptcha v2迁移到不可见的reCaptcha。我使用Parsley.js进行表单验证，并使用malsupajax表单插件提交表单。我当前的代码如下所示： HTML: 这将成功地将g-recaptcha-response传递到send1.php，在那里验证recaptcha 如何将不可见的reCaptcha与此脚本集成我试着用这个： <div id='recaptcha' class="g-recaptcha" da

我正在尝试从使用Google reCaptcha v2迁移到不可见的reCaptcha。我使用Parsley.js进行表单验证，并使用malsupajax表单插件提交表单。我当前的代码如下所示：

HTML:

这将成功地将g-recaptcha-response传递到send1.php，在那里验证recaptcha

如何将不可见的reCaptcha与此脚本集成

我试着用这个：

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

在ajaxSubmit（）之前，将字段g-recaptcha-response添加到Ajax调用中，但其值为空

有什么帮助吗？

我希望这能帮到你，我还没有处理过欧芹，但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);
    }
}

函数renderecaptcha（）{
对于（变量i=0；i


您的按钮将具有sitekey而不是div。这将大大简化事情
<button type="submit" class="common-form__submit" data-sitekey="SITEKEY_HERE">Send Your Request</button>

发送您的请求
我将与您分享如何让欧芹和隐形雷帕查为我工作。下面是我使用的代码。这只是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>

我的解决方案主要基于这篇文章（这要归功于他）：

希望能有帮助，因为我也寻找了一段时间的解决方案。
（我从中复制了我的答案）
因为您需要做一些变通：
1.添加隐藏的输入字段，带有数据parsley required=“true”
，value=“
，如下所示：
<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">

3.在js代码的某个地方添加此简单函数：
function recaptchaCallback() {
    document.getElementById('myField').value = 'nonEmpty';
}

4.添加带有自定义函数值的属性数据回调
：
<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>


我对此也很感兴趣，希望得到这个建议，但它似乎对我不起作用。。。我用你的代码替换了我的javascript代码，并替换了按钮。。。欧芹验证有效，但当所有字段都正确时，表单将提交，但不使用ajax。。。g-recaptcha-response为空。。。我在页面上没有看到任何显示recaptcha在那里的内容。。。我应该首先调用一些东西来实际呈现验证码吗？很好的解决方案，谢谢。。。我唯一的问题是，如果必填字段填写不正确，那么每次提交表单时都会弹出Recaptcha。。。你能建议一种方法，这样只有在欧芹被成功验证后才能触发Recaptcha吗？这看起来是解决我问题的一个很好的方法。。。我将尝试添加它。。。谢谢…不客气，很简单，我已经试过了，很有效！如果您认为这是正确的，那么将其标记为重复，而不是再次复制完全相同的答案。这不是重复的问题，只是重复的答案。这是我对已接受答案的评论的后续，并且是对其的补充。。。它可以防止重演再次出现…谢谢Shachar。。。
$('.js-validate').parsley().on('form:submit', function() {
    //AJAX post here    
    return false;
});

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

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

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

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