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

我正在将recaptcha与我的laravel应用程序一起使用

我只想使用jquery检查recaptcha在表单提交上的响应，并通过请求验证captcha的警报停止用户

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

这是我的密码

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

---

您正在加载两次google recaptcha库

---

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

WARNING: Tried to load angular more than once.

---

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

您正在加载库2次

选择

或

---

如果需要动态验证，只需在页面上对每个验证码使用此选项，包括：

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

var onloadCallback=函数（）{
//除去旧的
$（'.g-recaptcha'）.html（''）；
$（'.g-recaptcha'）。每个（函数（i，验证码）{
grecaptcha.render（验证码{
“站点密钥”：“您的密钥”
});
});
};

但是速度很慢。您还可以最初在第页定义所有recaptchas：

---

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

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

reCaptcha容器中的某些元素

reCaptcha占位符元素必须为空

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

这对我很有效

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

var onloadCallback=函数（）{
如果（验证码长度）{
grecaptcha.render（验证码{
“站点密钥”：“您的密钥”
});
}
};

这行得通吗：

如果不行，您是否在意外情况下将脚本包含两次？我也有同样的问题。。当我看到Google Chrome控制台时，我看到api.js被加载了一次，但recaptcha____________________________。这里可能有什么问题？如何防止脚本被加载两次？因为默认情况下在Ruby中呈现“”时加载它。在我的情况下，我只加载了一次，但仍然有issue@NithinChandran我不这么认为。在谷歌chrome开发工具中确认这一点。它可能从另一个脚本加载两次。

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

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

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