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

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

score 121 · Accepted Answer

121

您正在加载 google recaptcha 库两次。

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

于 2016-09-03T09:19:10.687 回答

score 7 · Accepted 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>

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

score 1 · Accepted Answer

WARNING: Tried to load angular more than once.

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

score 0 · Accepted Answer

就我而言，我使用链接作为按钮：

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

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

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

score 0 · Accepted Answer

如果您需要动态，只需为页面上的每个验证码使用这个，包括：

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

但它很慢。您还可以在页面最初定义所有重新验证码： https ://developers.google.com/recaptcha/docs/display

score 0 · Accepted Answer

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

score 0 · Accepted Answer

这对我有用。

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

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

9 回答 9

Related

Reference