失败提交时，同一页上的多个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消失？

回答

相关问题