失敗提交時，同一頁上的多個Recaptcha消失？

我有兩個ajax窗體在頁面上都是部分視圖。兩人都有recaptcha，我似乎無法爲表單提交併未通過驗證後找到重新加載recaptcha的方法。失敗提交時，同一頁上的多個Recaptcha消失？

的ReCaptcha的明確加載和我有兩個問題，首先，如果我使用：

<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>

在這兩種形式的話，我收到一個「未捕獲錯誤的reCAPTCHA佔位符元素必須是空的」。所以我不能那樣做。如果我把上面的加載整個頁面的整體佈局，我有我的第二個問題是，一旦表單提交不正確，recpatcha將不會重新加載。

用於加載每個驗證碼的腳本如下：

var recaptcha1; 
var recaptcha2; 
var myCallBack = function() { 

    //Render the recaptcha1 on the element with ID "recaptcha1" 
    recaptcha1 = grecaptcha.render('recaptcha1', { 
     'sitekey': 'sitekeyhere', 
     'theme': 'light' 
    }); 


    //Render the recaptcha2 on the element with ID "recaptcha2" 
    recaptcha2 = grecaptcha.render('recaptcha2', { 
     'sitekey': 'sitekeyhere', 
     'theme': 'light' 
    });

的ReCaptcha在形式看起來像：

<div id="recaptcha1"></div>

我使用MVC 5，我對形式controlller行動提交的這樣的事情：

public async System.Threading.Tasks.Task<ActionResult> FormSubmit(contactform model, string whichpage) 
    {if (ModelState.IsValid && status) 

     {*Updates database/sends email here* 

else 
     { 

      return PartialView("_contactform", model); 

     }

我試過了各種各樣的組合，其中不同的硫ngs被加載到不同的地方，但我找不到可以正常工作的組合。當提交任一表格並且未通過驗證時，我可以通過哪種方式將recaptcha的各自表格提交給各自的表單？

來源

2016-04-25 Rob

我在通過ajax表單提交時遇到類似的問題。問題是，當表單返回並調用回調函數時，它希望以兩種形式呈現兩個ReCaptcha。由於一個ReCaptcha已經呈現，另一個ReCaptcha中斷。要僅以適當的形式呈現ReCaptcha，請添加以下if語句以檢查ReCaptcha是否已經在受尊重的容器中呈現。這個例子是使用jQuery。

var myCallBack = function() { 
    if($('#recaptcha1').is(':empty')) { 
    grecaptcha.render('recaptcha1', { 
     'sitekey': 'sitekeyhere', 
     'theme': 'light' 
    }); 
    } 

    if($('#recaptcha2').is(':empty')) { 
    grecaptcha.render('recaptcha2', { 
     'sitekey': 'sitekeyhere', 
     'theme': 'light' 
    }); 
    } 
}

您還需要確保ReCaptcha佔位符元素都處於受尊敬的形式。

<form name="form1"> 
    [...] 
    <div id="recaptcha1"></div> 
</form> 

<form name="form2"> 
    [...] 
    <div id="recaptcha2"></div> 
</form>

來源

2017-02-15 16:49:48 RNickMcCandless

失敗提交時，同一頁上的多個Recaptcha消失？

回答

相關問題