Boostrap Ajax模式與谷歌reCaptcha - 呼叫captcha挑戰不工作兩次

我想實現一個CTA窗體的內容異步加載的Bootstrap模式。因此，無論何時我打開模態，其內容都會動態生成並插入到模態中。Boostrap Ajax模式與谷歌reCaptcha - 呼叫captcha挑戰不工作兩次

要呈現驗證碼，我使用Bootstrap模態的打開事件。基本上，我只適用於當模式的內容lodaed並顯示驗證碼：

 self.$modal.on('shown.bs.modal', function() { 
      $('.bootstrap.modal-backdrop.fade.in').css("z-index", 1059); 
      var form = $("#cta-modal-holder form.callToAction"); 
      var captchaCheckNeeded = form.attr('data-captcha'); 


      //Check if we need to apply captcha on the form 
      if (captchaCheckNeeded.toLowerCase() == 'true') { 
       //This apply the render() method on the form using an invisible <div> 
       IMD.Website.Cms.GoogleCaptcha(form[0]); 
      } 
     });

直到這裏，沒有煩惱，驗證碼圖標中顯示的驗證碼的頁面下角而被呈現，以及應用在形成。然後，我只想在表單在客戶端有效時觸發驗證碼挑戰。所以基本上，按鈕上的單擊事件，我首先檢查的形式是完全有效之前調用grecaptcha.execute（）方法：

  $.when($form.isFormValidAsync()).then(function (isValid) { 
       //First we perform the classic form client validation, only if this IsValid, then we perform the captcha validation 
       if (isValid) { 
        //If captchaCheckNeeded == true, then we execute the Captcha 
        //Here, two behaviours possible from client side : 
        // - 1. User is not suspected as a BOT, captcha check is executed and return the token transparently from the user and form is sent automatically 
        // - 2. User is suspected as a BOT, then the captcha modal is showed to the visitor that has to fill the captcha challenge. 
        //  Only when the challenge is validated, then the form is sent because of the Captcha callback function. 
        if (captchaCheckNeeded.toLowerCase() == 'true') { 
         var holder = $form[0].querySelector('.recaptcha-holder'); 
         grecaptcha.execute(holder[0]); 
         $submitBtn.prop('disabled', false); 
        }else{ 
         $form.trigger('submit', { buttonSubmit: true }); 
        } 
       } else {

這工作完全在第一模開幕。問題是當我關閉模式然後重新打開它時，captcha.render（）完成了這項工作，但是當在客戶端驗證之後嘗試發送表單時，grecaptcha.execute（）不再向用戶提出挑戰。

我確定captcha方法已經很好地應用並且使用了正確的ID，因爲它在第一時間完美地工作。在谷歌API方面的細節看多了，我constat當我嘗試的ReCaptcha API以下錯誤只是呈現的驗證碼後第二次使用的GetResponse（）：

遺漏的類型錯誤：無法讀取屬性的價值「空

事實上，在下面的代碼：

var Do = function(a) { 
    var b = window.___grecaptcha_cfg.clients[a || 0]; 
    if (!b) 
     throw Error("Invalid ReCAPTCHA client id: " + a); 
    return vg(qo(b.id)).value 
} 

//Here, vg(qo(b.id)) represents the field g-recaptcha-response at the first 
call of the getResponse() method. 
//At the second call, this value is null, even if I clearly see the field in 
my form after calling the render() method.

那麼這個塊我的形式，從來沒有TRIGG驗證碼挑戰的發送。

讓我確切地說，我試圖在模式結束時重置驗證碼，這很好地應用，但這不會改變問題。

我儘量做到儘可能清楚，不容易總結這類問題，任何幫助將不勝感激。

最好的問候，

來源

2017-04-25 gorgozilla

我有類似的問題，你和我找到了解決方案。經過近模式嘗試從全局窗口擦除驗證碼的配置這樣的：

window['___grecaptcha_cfg'] = undefined;

在我們的情況下解決了這個問題。

來源

2018-03-01 12:11:34 Pasiv

Boostrap Ajax模式與谷歌reCaptcha - 呼叫captcha挑戰不工作兩次

回答

相關問題