Question

我正在使用recaptcha和我的laravel应用程序。

我只想检查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

您正在加载图书馆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 3

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

Answer 4

WARNING: Tried to load angular more than once.

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

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>

但它很慢。您还可以在页面上最初定义所有重新搜索： 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>

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

7 个答案: