web-dev-qa-db-ja.com

フォームを送信する前に、ユーザーにGoogleの新しいrecapchaをクリックすることを要求する

私のフォーム（HTML5）内でGoogleの新しいrecaptchaを使用しています： https://www.google.com/recaptcha

フォームを送信する前に、recaptchaをチェックして必要に応じてマークする方法はありますか？サーバー側ではなくクライアント側でこれを検証したいと思います。そうすれば、フォームに戻って、キャプチャに何も入力しないことについてユーザーに警告する必要がなくなります。

ユーザーがrecaptchaに何かを入力したかどうかを確認するために使用できるjavascriptはありますか？

javascriptphpformsrecaptcha
17
Ryan Fung

ID g-recaptcha-responseのtextareaフィールドを確認できます。あなたは次のようにすることができます：

$("form").submit(function(event) {

   var recaptcha = $("#g-recaptcha-response").val();
   if (recaptcha === "") {
      event.preventDefault();
      alert("Please check the recaptcha");
   }
});

これがお役に立てば幸いです。

50
jagad89

AnkeshとLammertの両方のソリューションの一部を使用したバニラJavaScript実装：

var form = document.getElementById('ctct-custom-form');
form.addEventListener("submit", function(event){
    if (grecaptcha.getResponse() === '') {                            
      event.preventDefault();
      alert('Please check the recaptcha');
    }
  }
, false);

フォーム送信リスナーコードのクレジット： JavaScriptでフォーム送信イベントをリッスンするにはどうすればよいですか？

8
rylanb

grecaptcha.getResponse()-Recaptchaの応答を返します。以下のような状態で確認できます

grecaptcha.getResponse(opt_widget_id) === ""

オプションのウィジェットID。指定されていない場合、デフォルトで作成された最初のウィジェットになります。

参照： https://developers.google.com/recaptcha/docs/display

3
Ankesh Mistry

Rylanbの答えを改善しようとしました。以下のコードは、g-captchaがアクティブになっていて送信を禁止しているページ内のすべてのフォームを見つけます。注：div.g-recaptchaはformの子です

const forms = document.querySelectorAll('div.g-recaptcha');
forms.forEach(form=> {
    const formParentElement = form.parentElement;

    formParentElement.addEventListener("submit", e => {
        if (grecaptcha.getResponse() === '') {
            e.preventDefault();
            alert('Please check the recaptcha');
        }
    }, false)
});
2
Daniel Turuș