错误: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

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

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