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

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

我只是想检查使用jQuery的表单提交recaptcha的回应，并通过提醒validationvalidationcaptcha停止用户。

但是，即使未填写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> 

我在浏览器控制台中得到这个错误，表单被提交。

 Error: ReCAPTCHA placeholder element must be empty 

Answer 1

您正在加载谷歌recaptcha库两次。

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

Answer 2

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

Answer 3

您正在加载图书馆2次

select

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

 WARNING: Tried to load angular more than once. 

在AngularJs这个错误导致这样的问题你可以检查jQuery的同样。

Answer 5

如果您需要dynamic，请在页面上的每个validation码上点击此处，包括：

  <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