reCaptcha隱形，歐芹和阿賈克斯形式

我試圖從使用Google reCaptcha v2遷移到隱形reCaptcha。我使用Parsley.js進行表單驗證，並使用Malsup Ajax表單插件提交表單。我當前的代碼看起來是這樣的：reCaptcha隱形，歐芹和阿賈克斯形式

HTML：

<form action="send1.php" method="post" class="contact_form">   
<label for="name_1">Name</label> 
<input type="text" name="name_1" id="name_1" value="" required /> 
<div class="g-recaptcha" data-sitekey="XXX"></div> 
<input type="submit" class="button" value=""> 
</form>

JS：

$('.contact_form').parsley(); 
$('.contact_form').submit(function(){ 
    if($('.contact_form').parsley().validate()){ 
     $('.contact_form').ajaxSubmit(); 
    } 
    return false; 
});

這個成功通過一個G-驗證碼 - 響應於send1.php，其中的ReCaptcha有效。

如何將隱形reCaptcha與此腳本集成？

我嘗試使用這樣的：

<div id='recaptcha' class="g-recaptcha" 
      data-sitekey="XXX" 
      data-callback="onSubmit" 
      data-size="invisible"></div> 
</div>

但我不知道如何使用數據的回調。如果我添加

grecaptcha.execute();

的ajaxSubmit的（），那麼場G-reCAPTCHA的響應被添加到Ajax調用之前，但它的價值是空白......

任何幫助，請？

來源

2017-03-31 Dog

我有興趣進入這個也 – gonzo

我會告訴你我的ParsleyJS和Invisible reCaptcha如何爲我工作。以下是我使用的代碼。這只是POC代碼，不是生產;我沒有做一個AJAX的帖子。並請原諒任何uglyness，因爲我要帶出了很多絨毛：

<!DOCTYPE html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
     <script src="../node_modules/parsleyjs/dist/parsley.min.js"></script> 
    </head> 

    <body> 
     <form action="#" data-parsley-validate class="js-validate"> 
      <div> 
       <label for="input-first-name">First Name*</label> 
       <input 
        type="text" 
        id="input-first-name" 
        name="first-name" 
        data-parsley-trigger="blur" 
        data-parsley-error-message="First Name is required" 
        required> 
      </div> 
      <div> 

       <label for="input-last-name">Last Name*</label> 
       <input 
        type="text" 
        name="last-name" 
        id="input-last-name" 
        data-parsley-trigger="blur" 
        data-parsley-error-message="Last Name is required" 
        required> 
      </div> 
      <div> 
       <button type="submit" id="theSubmitBtn">Submit</button> 
      </div>  

      <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script> 
      <script> 
       function onScriptLoad() { 
        var htmlEl = document.querySelector('.g-recaptcha'); 

        var captchaOptions = { 
         sitekey: 'Your_Site_Key', 
         size: 'invisible', 
         callback: function (token) { 
           $('.js-validate').submit(); 
           console.log('test: ',token); 
          } 
        }; 

        recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, false); 

        $('#theSubmitBtn').click(function(e){ 
         e.preventDefault(); 

         if(grecaptcha.getResponse() != ''){ 
          grecaptcha.reset(); 
         } 
         grecaptcha.execute(); 
        }); 
       } 
      </script> 
      <div id='recaptcha' class="g-recaptcha"></div> 

     </form> 
    </body> 
</html>

所以，如果你想要做的通過AJAX提交，你可以添加一個ParsleyJS事件偵聽器，做你的Ajax調用的方式。

$('.js-validate').parsley().on('form:submit', function() { 
    //AJAX post here  
    return false; 
});

我根據我的解決方案大多是關閉這個職位（這樣的信用給他）： Invisible google Recaptcha and ajax form

希望它能幫助，因爲我也找了一會兒的解決方案。

來源

2017-05-18 04:28:18

偉大的解決方案，謝謝...我唯一的問題是，如果必填字段沒有正確填寫，那麼每次提交表單時都會彈出Recaptcha ...您能否提供一種方式，以便Recaptcha僅在歐芹已成功驗證？ – Dog

我希望這會幫助你，我沒有處理歐芹，但reCaptcha與它整合的方式應該是一樣的。如果您有任何問題，請告訴我！

我使用這樣的方法來呈現我的reCaptchas。這使您可以在同一頁面上擁有多個驗證碼以及進行驗證。

對於表單驗證，我已經將parsley驗證添加到下面的函數中。注意，如果驗證返回false，我們重置驗證碼...這很重要。如果沒有發生，表格不能重新提交。

function renderRecaptcha() { 
    for (var i = 0; i < document.forms.length; ++i) { 
     var form = document.forms[i]; 
     var button = form.querySelector('[data-sitekey]'); 
     if (null === button) { 
      continue; 
     } 

     (function (frm) { 
      var sitekey = button.getAttribute("data-sitekey"); 
      var buttonId = grecaptcha.render(button, { 
       "sitekey": sitekey, 
       "size": "invisible", 
       "badge": "inline", 
       "callback": function (recaptchaToken) { 
        if ($(frm).parsley().validate()) { 
         $(frm).ajaxSubmit(); 
         // HTMLFormElement.prototype.submit.call(frm); 
        } else { 
         grecaptcha.reset(buttonId); 
        } 
       } 
      }); 

      frm.onsubmit = function (evt) { 
       evt.preventDefault(); 
       grecaptcha.execute(buttonId); 
      }; 
     })(form); 
    } 
}

您的按鈕將是什麼具有sitekey而不是div。這使事情變得非常簡單。

<button type="submit" class="common-form__submit" data-sitekey="SITEKEY_HERE">Send Your Request</button>

來源

2017-04-04 03:21:00 Allen

感謝對於這個建議，但它似乎不適用於我......我用你的代替了我的JavaScript代碼，並替換了按鈕......歐芹驗證工作，但是當所有的字段都是正確的表單提交，但沒有與Ajax ... g-recaptcha-response是空的......我什麼也沒有看到顯示recaptcha在那裏的e頁面...我是否應該打電話給實際渲染驗證碼的東西？ – Dog

（我複製從here我的答案）

對於ParsleyJS你會做一些變通方法：

1.增加隱藏的輸入字段，用data-parsley-required="true"，value = ""，像這樣：

<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">

2.添加錯誤容器（正好低於或低於您的g-recaptcha格）：

<span id='errorContainer'></span>

3.添加這個簡單的功能，在某處你的JS代碼：

function recaptchaCallback() { 
    document.getElementById('myField').value = 'nonEmpty'; 
}

4.增加屬性data-callback自定義函數的值：

<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>

來源

2017-09-03 05:51:18

，看起來像一個偉大的解決方案，我的問題...我會嘗試添加它...謝謝... – Dog

歡迎您，其非常簡單，我已經嘗試過它，它的工作原理！ –

如果您認爲這是正確的，那麼將其標記爲重複，而不是再次複製完全相同的答案。 –

reCaptcha隱形，歐芹和阿賈克斯形式

回答

相關問題