Error: ReCAPTCHA placeholder element must be empty

Question

我在 laravel 应用程序中使用 recaptcha。

我只想检查 recaptcha 对使用 jquery 提交的表单的响应，并通过请求验证验证码的警告阻止用户。

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

这是我的代码。

 $('#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

Answer 1

您正在加载 google recaptcha 库两次。

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

Answer 2

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

Answer 3

WARNING: Tried to load angular more than once.

在 AngularJs 中，此错误会导致此类问题 您可以同样检查 jquery。

Answer 4

您正在加载库 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>

Answer 5

如果您需要动态包括：

，只需为页面上的每个验证码使用这个

    <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>

但是很慢。您还可以在页面初始定义所有 recaptchas： https://developers.google.com/recaptcha/docs/display

Answer 6

当我尝试在非空元素上呈现 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>

Answer 7

这对我有用。

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

Answer 8

如果您使用 postscribe 之类的东西来加载 recaptcha 异步脚本，您必须使用一个容器 (div) 注入脚本标签，另一个容器作为 reCAPTCHA 实例的目标，两个 div s.

Answer 9

在我的例子中，我使用了 link 作为按钮：

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

我改用 Button 元素解决了这个问题：

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