Javascript 错误：ReCAPTCHA 占位符元素必须为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37021241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error: ReCAPTCHA placeholder element must be empty
提问by Nirali Joshi
I am using recaptcha with my laravel application.
我在我的 Laravel 应用程序中使用了 recaptcha。
I just want to check recaptcha's response on form submit using jquery and stop user by alert that pleade validate captcha.
我只想检查recaptcha对使用jquery提交的表单的响应，并通过请求验证验证码的警报停止用户。
but , I could not stop form submission even if captcha is not filled.
但是，即使没有填写验证码，我也无法停止提交表单。
here is my code.
这是我的代码。
$('#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>
I am getting this error in browser console , and form gets submit.
我在浏览器控制台中收到此错误，并且表单被提交。
Error: ReCAPTCHA placeholder element must be empty
回答by Waqas Bukhary
You are loading the google recaptcha library twice.
您正在两次加载 google recaptcha 库。
回答by ztvmark
You are loading the library 2 times
您正在加载库 2 次
chose
选择了
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
or
或者
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
回答by Gary D
I am using ContactForm7 for Wordpress, which has a built-in integration with Recaptcha. I also have the BWP Recaptcha plugin, which uses the same recaptcha libraries. I had mistakenly added my activation keys to both, which was causing the js library to load twice. Once I removed the keys from the CF7 plugin the error went away.
我正在为 Wordpress 使用 ContactForm7，它具有与 Recaptcha 的内置集成。我还有 BWP Recaptcha 插件，它使用相同的 recaptcha 库。我错误地将我的激活密钥添加到两者中，这导致 js 库加载两次。一旦我从 CF7 插件中删除了密钥，错误就消失了。
回答by MaazKhan47
WARNING: Tried to load angular more than once.
In AngularJs this error causes such problems You can check for jquery likewise.
在 AngularJs 中，此错误会导致此类问题您同样可以检查 jquery。
回答by Дима Лобурец
Just youse this for each captcha at the page if you need dynamic including:
如果您需要动态包括：
<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>
But it is slow. You can also define all recaptchas at page initially: https://developers.google.com/recaptcha/docs/display
但它很慢。您还可以最初在页面定义所有 recaptchas：https: //developers.google.com/recaptcha/docs/display
回答by way2vin
I got this error when I tried to render reCaptcha on non empty element
当我尝试在非空元素上呈现 reCaptcha 时出现此错误
<div class="g-recaptcha" data-sitekey="{{ env('GOOGLE_RECAPTCHA_SITE_KEY') }}">
<div class="form-group">some element inside reCaptcha container</div>
</div>
reCaptcha placeholder element must be empty
reCaptcha 占位符元素必须为空
<div class="g-recaptcha" data-sitekey="{{ env('GOOGLE_RECAPTCHA_SITE_KEY') }}"></div>
回答by Siddhant
This worked for me.
这对我有用。
<script>
var onloadCallback = function() {
if (captcha.length ) {
grecaptcha.render(captcha, {
'sitekey' : 'your key'
});
}
};
</script>
