web-dev-qa-db-ja.com

ユーザーが無効な入力を送信した後、Google Recaptchaウィジェットをリロードする方法

新しいgoogle recaptchaウィジェットを含む登録フォームがあります。ユーザーが情報を送信すると、JavaScriptで検証を確認し、ページに問題を返します（例：「有効な電話番号を使用してください」）。ただし、ページがリロードされないため、ユーザーが正しい情報を入力して再度送信すると（recaptchaを再度実行する必要はありません）... recaptchaは無効になり、ページをリロードしないと送信できません。

これに良い解決策はありますか？何とかウィジェットをリロードできますか？ grecaptcha.renderを試しましたが、実際には何もしませんでした。

編集：

ウィジェットを再度レンダリングしようとすると、「プレースホルダー要素は空でなければならない」と表示されます

動作しているように見える要素（$（ '。g-recaptcha'）。empty（）;）を空にしてレンダリングしましたが、それでも同じエラーがスローされました。

javascriptruby-on-railsrecaptcha
30
Matthew Berman

探しているメソッドはgrecaptcha.reset()です

ただし、この関数が機能するためには、reCaptachaを次のように明示的にレンダリングする必要があります：<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

37
Ghislaindj

私はそれを使用するだけでそれを行うことができました：

grecaptcha.reset();
8
Waqleh

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' });
7
Déján Kőŕdić

個人的に要素のhtmlコンテンツをリセットします

$('#captcha').html('');

その後、私はrecaptchaをリロードします

$.getScript("https://www.google.com/recaptcha/api.js");

recaptchaコンテンツをロードします

<div id="captcha" class="g-recaptcha" data-sitekey="yourSitePublicKey"></div>
7
Yacine

@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回表示されることはありません。

6
Mike Spear

スクリプトで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/

そしてこの投稿

不明なReferenceError：Recaptchaが定義されていません

3
tzafar

新しい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>
0
Sara Khan

Symfony2の_excelwebzone/recaptcha-bundle_で同じ問題が発生しました。基本的にはrecaptchaは過去にDOMにロードされ、空であるはずのプレースホルダーはいっぱいだったと言われています。

これらのバンドルには明示的なコールバックの設定がないため、recaptchaをロードする前にプレースホルダーまたはフォーム全体が空であることを確認する必要があります。

そして、私はAJAXでそれをロードしていたので、DOMで立ち往生しました。 2回目の呼び出しで、そこにありました。

単に$('#your-div-with-form').html('')を使用できます

0
Marek Opatřil

WordPressを使用している場合は、別のreCaptchaプラグインがインストールされていないことを確認してください。それが問題でした。

0
Elon Zito

ReCaptcha（バージョン1）内でreload()関数を呼び出してみてください：

Recaptcha.reload();

JavaScriptを使用してReCaptchaをリロードする方法？

0
StaticVoid
<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>
0
Utsav Kundu