错误：ReCAPTCHA占位符元素必须为空

Question

我正在使用recaptcha来保护我的Laravel应用程序。

我只想在表单提交时使用jQuery检查recaptcha的响应，并通过警告停止用户，请验证验证码。

但是，即使未填写验证码，我也无法阻止表单提交。

这是我的代码。

 $('#payuForm').on('submit', function (e) {

                    var response = grecaptcha.getResponse();

                    if(response.length == 0 ||  response == '' || response ===false ) {
                        alert('Please validate captcha.');
                        e.preventDefault();
                    }
                });



<div class="captcha">
 {{ View::make('recaptcha::display') }}
</div>

我在浏览器控制台中看到这个错误，并且表单已经提交。

Error: ReCAPTCHA placeholder element must be empty

- Nirali Joshi

---

这段代码是否有效：<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> 如果无效，您是否不小心重复包含了该脚本？ - HC_

Answer 1

您正在两次加载谷歌reCAPTCHA库。

https://www.google.com/recaptcha/api.js

- Syed Waqas Bukhary

---

我也遇到了同样的问题。当我查看Google Chrome控制台时，我发现api.js只加载了一次，但recaptcha__es.js却加载了三次。这可能是什么问题呢？ - jstuardo

如何防止脚本被加载两次？因为在 Ruby 中呈现 '<%= recaptcha_tags %>' 时，默认情况下会加载它。 - Farhad

在我的情况下，我只加载了一次，但仍然遇到了问题。 - Beingnin

@NithinChandran 我不这么认为。在谷歌浏览器开发工具中确认一下。有可能是从另一个脚本中加载了两次。 - Syed Waqas Bukhary

Answer 2

您正在加载库两次

选择

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

或者

     <script src="https://www.google.com/recaptcha/api.js" async defer></script>

- ztvmark

Answer 3

当我尝试在非空元素上渲染reCaptcha时，我遇到了这个错误。

<div class="g-recaptcha"  data-sitekey="{{ env('GOOGLE_RECAPTCHA_SITE_KEY') }}">
      <div class="form-group">some element inside reCaptcha container</div>
</div>

reCaptcha占位符元素必须为空。

<div class="g-recaptcha"  data-sitekey="{{ env('GOOGLE_RECAPTCHA_SITE_KEY') }}"></div>

- way2vin

---

这是正确的答案。我使用的是带有图标的按钮的id。将id设置为图标而不是按钮解决了问题。 - Sayed

Answer 4

我正在使用WordPress的ContactForm7，它内置了与Recaptcha的集成。我还安装了BWP Recaptcha插件，该插件使用相同的recaptcha库。我错误地将激活密钥添加到了两个插件中，导致js库加载了两次。一旦我从CF7插件中删除了密钥，错误就消失了。

- Gary D

Answer 5

在我的情况下，我使用链接作为按钮：

<a class="g-recaptcha"  data-sitekey="...">Submit</a>

我通过使用Button元素来解决了这个问题：

<button class="g-recaptcha"  data-sitekey="...">Submit</button>

- mgraph

Answer 6

WARNING: Tried to load angular more than once.

在AngularJS中，这个错误会导致一些问题。您可以类似地检查jquery。

- MaazKhan47

Answer 7

它说容器应该是空的。 例如：

<div id="recaptcha-container"></div>

请确保此 div 为空，如上所示，并将此 ID 传递给 RecaptchaVerifier，则问题将得到解决。

注意：您必须在 HTML 中定义此容器。

- Neo Murphy

Answer 8

如果您正在使用像postscribe这样的工具来异步加载reCAPTCHA脚本，您必须使用一个容器（div）来注入脚本标签，另一个容器作为reCAPTCHA实例的目标，需要两个div。

- elaineee

Answer 9

如果您需要包括动态验证码，请在页面上为每个验证码使用此代码：

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

    <div class="g-recaptcha"></div>

    <script>
        var onloadCallback = function() {
            //remove old
            $('.g-recaptcha').html('');

            $('.g-recaptcha').each(function (i, captcha) {
                grecaptcha.render(captcha, {
                    'sitekey' : 'your key'
                });
            });
        };
    </script>

但是它很慢。您也可以在页面最初定义所有的reCAPTCHA： https://developers.google.com/recaptcha/docs/display

- Дима Лобурец

Answer 10

这对我有用。

<script>
    var onloadCallback = function() {
        if (captcha.length ) {
            grecaptcha.render(captcha, {
                'sitekey' : 'your key'
            });
        }
    };
</script>

- Siddhant