多次验证错误:reCAPTCHA占位符元素必须是元素或ID

时间:2019-03-27 12:18:53

标签: javascript jquery validation recaptcha

我在与 reCAPTCHA 集成的网站上有多种表格。两种类型的用户的两种注册表格和一种联系方式。

像这样在标头中添加reCAPTCHA API。

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

在页脚中,我添加了reCAPTCHA渲染功能。

<script type="text/javascript">
      var verifyCallback = function(response) {
        //alert(response);
      };

      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.

        widgetId1 = grecaptcha.render('hiddenRecaptcha1', {
          'sitekey' : 'sitekey',
          'theme' : 'light',
          'callback' : verifyCallback,
        });

        widgetId2 = grecaptcha.render(document.getElementById('hiddenRecaptcha2'), {
          'sitekey' : 'sitekey',
          'callback' : verifyCallback
        });
        grecaptcha.render('hiddenRecaptcha', {
          'sitekey' : 'sitekey',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
</script>

我正在使用jquery验证所有reCAPTCHA。

联系表格验证

$("#contactus").validate({
ignore: ":hidden:not(.my_cpa)",
rules: {
    "hiddenRecaptcha": {
        required: function() {
            if (grecaptcha.getResponse() == '') {
                return true;
            } else {
                return false;
            }
        }
    }
},
messages: {
    "hiddenRecaptcha": "Please Prove That You Are Not Robot"
},
highlight: function(element, errorClass) {
    $(element).addClass('has-error');
},
unhighlight: function(element) {
    $(element).removeClass('has-error');
},
submitHandler: function(form) {
    form.submit();
}
});

联系方式中的验证码

 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
    <div id="hiddenRecaptcha"></div>
        <input type="hidden" class="my_cpa hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
</div>

首次注册表格中的验证码及其验证

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
    <div id="hiddenRecaptcha1"></div>
    <input type="hidden" class="my_cpa1 hiddenRecaptcha1 required" name="hiddenRecaptcha1" id="hiddenRecaptcha1">
</div>


function residentForm(){
        var settings = $('#registration_form').validate().settings;
        $.extend(settings, {
            ignore: ":hidden:not(.my_cpa1)",
            rules: {
                "hiddenRecaptcha1": {
                    required: function() {
                        if (grecaptcha.getResponse() == '') {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            },
            messages: {
                "hiddenRecaptcha1": "Please Prove That You Are Not Robot"
            }
        });
    }

第二份注册表格中的验证码及其验证

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
    <div id="hiddenRecaptcha2"></div>
        <input type="hidden" class="my_cpa2 hiddenRecaptcha2 required" name="hiddenRecaptcha2" id="hiddenRecaptcha2">
</div>

function businessForm(){
        var settings = $('#bregistration_form').validate().settings;
        $.extend(settings, {
            ignore: ":hidden:not(.my_cpa2)",
            rules: {
                "hiddenRecaptcha2": {
                    required: function() {
                        if (grecaptcha.getResponse() == '') {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            },
            messages: {
                "hiddenRecaptcha2": "Please Prove That You Are Not Robot"
            }
        });
    }

问题:

仅首次注册表单已使用jquery验证并成功提交,而在其他表单上,该表单仍显示消息请证明您不是机器人,并且表单未提交。

当我在联系页面以外的任何页面 上时,它在控制台中显示以下消息。

  

reCAPTCHA占位符元素必须是元素或ID

我已经检查了所有这些答案,ReCAPTCHA placeholder element must be an element or idUncaught Error: ReCAPTCHA placeholder element must be an element or idReCaptcha: “The bind parameter must be an element or id”。但无法验证我的表单,也无法删除错误。

有人可以告诉我我在哪里做错了吗?

0 个答案:

没有答案