新しいgoogle recaptchaウィジェットを含む登録フォームがあります。ユーザーが情報を送信すると、JavaScriptで検証を確認し、ページに問題を返します(例:「有効な電話番号を使用してください」)。ただし、ページがリロードされないため、ユーザーが正しい情報を入力して再度送信すると(recaptchaを再度実行する必要はありません)... recaptchaは無効になり、ページをリロードしないと送信できません。
これに良い解決策はありますか?何とかウィジェットをリロードできますか? grecaptcha.renderを試しましたが、実際には何もしませんでした。
編集:
ウィジェットを再度レンダリングしようとすると、「プレースホルダー要素は空でなければならない」と表示されます
動作しているように見える要素($( '。g-recaptcha')。empty();)を空にしてレンダリングしましたが、それでも同じエラーがスローされました。
探しているメソッドはgrecaptcha.reset()
です
ただし、この関数が機能するためには、reCaptachaを次のように明示的にレンダリングする必要があります:<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
私はそれを使用するだけでそれを行うことができました:
grecaptcha.reset();
JQueryでgrecaptcha.renderを使用している場合、jQuery要素ではなく、実際にDOM要素を設定していることを確認してください。
これはwill work:
grecaptcha.render( $('.g-recaptcha')[0], { sitekey : 'your_key_here' });
しかし、これはwont:
grecaptcha.render( $('.g-recaptcha'), { sitekey : 'your_key_here' });
個人的に要素のhtmlコンテンツをリセットします
$('#captcha').html('');
その後、私はrecaptchaをリロードします
$.getScript("https://www.google.com/recaptcha/api.js");
recaptchaコンテンツをロードします
<div id="captcha" class="g-recaptcha" data-sitekey="yourSitePublicKey"></div>
@tzafarの回答に付随するコードを次に示します。
var myCaptcha = null;
function prepCaptcha() {
if (myCaptcha === null)
myCaptcha = grecaptcha.render(document.getElementById('my-captcha'), {
'sitekey': myCaptchaKey,
'theme': 'light'
});
else
grecaptcha.reset(myCaptcha);
}
私の場合、my-captcha
は、Bootstrap= modal。内のdiv
のidです。モーダルのイベントハンドラでprepCaptcha()
を実行しますshown.bs.modal
イベント:初めてキャプチャを初期化し、その後のモーダルのショーでは、それをリセットします。
また、完成したキャプチャの値を印刷することにより、新しいキャプチャを取得していることをすばやく確認できることに注意してください。
console.log(grecaptcha.getResponse(myCaptcha));
同じ値が2回表示されることはありません。
スクリプトでrecaptcha render jsイベントを1回だけ呼び出す必要があります。スクリプトでgrecaptcha.render
jsイベントが2回呼び出された場合、recaptchaコードは無効です。検証チェック時にgrecaptcha.render
関数を2回呼び出さないように、コードをチェックする必要があります。
OR
コンソールには、reCAPTCHAスクリプトの問題を示すUncaught ReferenceError: Recaptcha is not defined
エラーメッセージが表示されます。これは、ページ内の不正なURL-http://api.recaptcha.net/js/recaptcha_ajax.js
が原因で発生します。 GoogleはreCAPTCHAを更新し、スクリプトの場所をhttp://www.google.com/recaptcha/api/js/recaptcha_ajax.js
に移動しました。
この投稿もチェックしてください
http://www.instructables.com/id/Fix-reCAPTCHA-errors-on-Instructables/
そしてこの投稿
新しいrecaptcha 2.0を使用している場合は、これを使用してください:コードビハインド:
ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);
単純なjavascriptの場合
<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>
Symfony2の_excelwebzone/recaptcha-bundle
_で同じ問題が発生しました。基本的にはrecaptchaは過去にDOMにロードされ、空であるはずのプレースホルダーはいっぱいだったと言われています。
これらのバンドルには明示的なコールバックの設定がないため、recaptchaをロードする前にプレースホルダーまたはフォーム全体が空であることを確認する必要があります。
そして、私はAJAXでそれをロードしていたので、DOMで立ち往生しました。 2回目の呼び出しで、そこにありました。
単に$('#your-div-with-form').html('')
を使用できます
WordPressを使用している場合は、別のreCaptchaプラグインがインストールされていないことを確認してください。それが問題でした。
<script>
function cform(token) {
$.ajax({
type: 'POST',
url: 'contact_chk.php',
data: $('#cform').serialize(),
success: function(response) {
grecaptcha.reset();
$("#con_msg").html(response);
document.getElementById("name").value='';
document.getElementById("subject").value='';
document.getElementById("email").value='';
document.getElementById("phone").value='';
document.getElementById("message").value='';
},
error: function(response) {
grecaptcha.reset();
$("#con_msg").html('Try Again...');
}
});
}
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>