Question

我在页面上有两个部分视图的ajax表单。两者都有重新收回，我似乎无法找到一种方法让重新提交的表格在提交表格并验证失败后重新加载。

Recaptcha被明确加载，我有两个问题，首先是我使用：

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

在两个表单上然后我收到一个＆＃39; Uncaught Error recaptcha占位符元素必须为空＆＃39;。所以我无法做到这一点。如果我将上面的内容加载到整个页面的整体布局中，那么我遇到的第二个问题是，一旦表单被错误地提交，recpatcha将不会重新加载。

加载每个recaptcha的脚本如下：

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'
    });

表格中的重新表述如下：

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

我正在使用MVC 5，我对表单提交的控制器操作是这样的：

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);

        }

我尝试过各种组合，在不同的地方加载不同的东西，但我找不到没有错误的组合。当提交任何表格并且验证失败时，我可以在各自的表格上重新收回的最佳方法是什么？

Answer 1

我通过ajax在表单提交方面遇到了类似的问题。问题是当表单返回并调用回调函数时，它想要以两种形式呈现两个ReCaptchas。由于已经渲染了一个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>

提交失败后，同一页面上的多重回扣消失了吗？

1 个答案: