reCAPTCHA Invisible - 再発行フォームの問題

Question

reCaptchaの使用中に問題が発生しました。コードでは、AJAXを使用してフォームを送信します。提出する前に、フィールドが満たされているかどうかを確認する必要があります。フィールドが塗りつぶされていない場合、送信は行われません。

この場合、テキストフィールドが入力されていない場合、警告が表示されます。

問題は無効な投稿を拒否した後、送信ボタンが2,3分間表示されなくなり、reCaptchaのエラーが表示されなくなります。一定期間が経過すると、reCaptchaは再び作業を開始し、ボタンの動作を送信します。

<form id="contact-form" method="post" action="javascript:void(0)"> 
     <input type="text" placeholder="Name" id="name"> 
     <input type="text" placeholder="E-Mail" id="email"> 
     <textarea placeholder="Message" id="message">/textarea> 
     <button class="g-recaptcha pull-right" data-sitekey="#your-site-key" data-callback="sendData" type="submit"> SEND <i class="flaticon-origami34"></i> </button> 
</form> 

ジャバスクリプト：

function sendData(){ 

    console.log('send data - '); // --> works 

    //send datas: 

    $("#contact-form").submit(); 

}; 

$('#contact-form').on("submit", function() { 

console.log('clicked submit'); // --> works 

name = $('#name').val().replace(/<|>/g, ""), // prevent xss 
    email = $('#email').val().replace(/<|>/g, ""), 
    msg = $('#message').val().replace(/<|>/g, ""); 

if (name == '' || email == '' || msg == '') { 

    alert("Please fill all areas !"); 

} else { 

    console.log('captcha response: ' + grecaptcha.getResponse()); // --> captcha response: 

    // ajax to the php file to send the mail 
    $.ajax({ 
     type: "POST", 
     url: "SaveContact.php", 
     data: "email=" + email + "&name=" + name + "&msg=" + msg + "&g-recaptcha-response=" + grecaptcha.getResponse() 
    }).done(function(status) { 
     if (status == "ok") { 
      // clear the form fields 
      $('#name').val(''); 
      $('#email').val(''); 
      $('#message').val(''); 
     } 
    }); 

}}); 

Answer 1

その後、あなたは目に見えないreCAPTCHAののクールダウンをリセットする必要がある、私はよりよい解決策を持っていないこの

var recaptchaIframe = document.querySelector('.grecaptcha-badge iframe'); 
recaptchaIframe.src = recaptchaIframe.src; 

のようなハックを使用することができます。

Answer 2

documentationによれば、grecaptcha.reset(opt_widget_id);と電話することもできます。opt_widget_idはオプションで、デフォルトの最初のrecaptchaウィジェットが作成されます。

Answer 3

あなたは、このようなスクリプトで明示的にreCAPTCHAのレンダリング場合：

var form = grecaptcha.render('idSelector', { 
    'sitekey' : 'your_sitekey', 
    'callback': callableFunction 

}, true) 

そして、「フォーム」変数がWIDGET_IDが含まれているので、あなたはこれを考え出したこの

grecaptcha.reset(form); 

Answer 4

のようなもののreCAPTCHAをリセットすることができますし、他の誰かが同じ問題を抱えている場合にそれを投稿したかったのです。 GoogleのサンプルコードセットではボタンIDが「送信」であり、onSubmit内から「送信」機能を呼び出すことができなかったためです。 idを他のものに変更することでそれが修正されました。