Ошибка множественного повторения: элемент-заполнитель reCAPTCHA должен быть элементом или идентификатором - PullRequest
Новая
       11

Ошибка множественного повторения: элемент-заполнитель reCAPTCHA должен быть элементом или идентификатором

0 голосов
/ 27 марта 2019

У меня есть несколько форм на веб-сайте, интегрированных с 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>

Я проверяю все reCAPTCHA с помощью jquery.

Проверка контактной формы 

$("#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 должен быть элементом или идентификатором

Я проверил все эти ответы, Элемент-заполнитель ReCAPTCHA должен быть элементом или идентификатором , Uncaught Ошибка: Элемент-заполнитель ReCAPTCHA должен быть элементом или идентификатором и ReCaptcha: «Параметр привязки должен быть элементом или идентификатором» . но не могу проверить мою форму и не могу удалить ошибку.

Кто-нибудь может сказать мне, где я делаю неправильно?

...