Question

我有一个asp.net MVC网站，其中包含一个带有reCaptcha表单的bootstrap模式。它在提交时正确验证输入，但如果它无效，则在渲染视图以便他们可以再次尝试时，验证码会消失，并且javascript控制台会显示此错误：＆＃34;无法执行＆＃39;写＆＃39; on＆＃39; Document＆＃39;：除非明确打开，否则无法从异步加载的外部脚本写入文档。＆＃34;我必须刷新页面并重新打开模态才能再次看到Captcha。

包含Captcha的代码片段（公钥/私钥在web.config中）：

<input type="hidden" name="ProductID" value="@Model.ProductID" />
<input type="hidden" name="UserTypeID" value="@Model.User.UserTypeID" />
@Html.Recaptcha(theme: Recaptcha.Web.RecaptchaTheme.Clean)
<div id="request-error-summary">
    @Html.ValidationSummary(false, "All fields are required.")
</div>

提交表格时的控制器代码：

public PartialViewResult SubmitRequest(RequestKitModel kitModel)
    {  

        /* code removed for brevity */

        RecaptchaVerificationHelper recaptchaHelper = this.GetRecaptchaVerificationHelper();

        if (String.IsNullOrEmpty(recaptchaHelper.Response))
        {
            ModelState.AddModelError("", "Captcha answer cannot be empty.");
            return PartialView("_Request", kitModel);
        }

        RecaptchaVerificationResult recaptchaResult = recaptchaHelper.VerifyRecaptchaResponse();

        if (recaptchaResult != RecaptchaVerificationResult.Success)
        {                
            ModelState.AddModelError("", "Incorrect captcha answer.");
            return PartialView("_Request", kitModel);
        }

        /* code to ruun upon success of captcha input */

        //close modal and return to results            
        return PartialView("_Confirmation");         
    }

Jquery Ajax调用SubmitRequest ...我认为我加载局部视图的方式可能是罪魁祸首。

       if ($('#request-form').valid()) {
                $.ajax({
                    url: "/SubmitRequest",
                    type: "POST",
                    data: $("#request-form").serialize(),
                    success: function (data) {
                        //show the confirmation (thanks) modal
                        $("#request-modal .modal-content").html(data);
                    },                       
                    error: function (XMLHttpRequest, textStatus, errorThrown) {                          
                        window.location.href = '@Url.Action("Error")';
                    }
                });
            }

更新：我将其更改为使用recaptcha_ajax.js，因为我在ajax请求后加载它。现在我收到了这个错误：＆＃34;无法设置属性＆＃39; innerhtml＆＃39; of null＆＃34;来自recaptcha_ajax.js文件（无法判断它正在抛出此错误的对象）。而不是在剃刀文件中调用Html.Recaptcha，我现在有了这个：

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<div id="recaptcha1"></div>

更新的AJAX调用：

$.ajax({
                    url: "/SubmitRequest",
                    type: "POST",                       
                    data: $("#request-form").serialize(),
                    success: function (data) {
                        //show the confirmation (thanks) modal 
                        $("#request-modal .modal-content").html(data);

                        Recaptcha.create("6LedL_sSAAAAAJuozIfRiVfNOCHs-jlTn6NM4c-T",
                            "recaptcha1",
                            {
                                theme: "white",
                                callback: Recaptcha.focus_response_field
                            }
                          );

                        console.log("done loading html");
                        console.log('captcha control: ' + $("#recaptcha1").length);

                    },                       
                    error: function (XMLHttpRequest, textStatus, errorThrown) {                          
                        window.location.href = '@Url.Action("Error")';
                    }
                });

Answer 1

尝试并输入javascript参考

    <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

在你的主要版面中，我遇到了同样的错误，因为javascript库没有完全加载。

您还应该检查回调中是否存在div。

我希望这有帮助，萨尔瓦多

输入失败后如何在屏幕上保留reCaptcha

1 个答案: