Question

我遇到的问题是，即使表单有效，表单错误仍然存在于页面上。

我有以下设置：

_Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

index.cshtml：

@model SimpleForm.Models.Name
@{
    ViewBag.Title = "Form";
}

<script>
    $().ready(function () {
        $("#quote_form").submit(function () {

            return true;
        });
    });
</script>
@using (Ajax.BeginForm("RunQuote", "Page", new AjaxOptions { UpdateTargetId = "quoteSummary" }, new { id = "quote_form", onreset = "return confirm('Clear all form data?')" }))
{    
    <input type="submit" value="Send" /> 
    <fieldset>
        <legend>Name </legend>
        <dl>
            <dt>First</dt>
            <dd>@Html.TextAreaFor(m => m.first, new { onblur = "$('#quote_form').submit();" })</dd>
            <dt>Last</dt>
            <dd>@Html.TextAreaFor(m => m.last, new { onblur = "$('#quote_form').submit();" })</dd>
        </dl>
    </fieldset>

    <div class="qMatrixSubText">
        @Html.ValidationSummary()
        @{
    Html.ValidateFor(m => m.first);
    Html.ValidateFor(m => m.last);
        }
    </div>                                       
    <div id="quoteSummary" class="quoteSummary">
    </div>                                       
}

FormController.cs

using System;
using System.Web.Mvc;
using SimpleForm.Models;

namespace SimpleForm.Controllers
{
    public class FormController : Controller
    {
        //
        // GET: /Form/

        public ActionResult Index()
        {
            return View();
        }

        public String RunQuote(Name quote)
        {
            return "Success!";
        }
    }
}

Name.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace SimpleForm.Models
{
    public class Name
    {
        [Required()]
        public string first { get; set; }
        public string last { get; set; }
    }
}

表单填充正常，如果我没有先放入任何内容，我会看到错误，表单将不会提交。在首先填充内容后，我获得了ajax调用，然后将“Success”发布到div。

然而，这是问题，错误“需要第一个字段”。仍留在页面上。这就好像ajax提交表单在验证有机会清除错误之前经过，然后它永远不会有机会。

任何获得验证的方法仍然可以删除错误吗？

Answer 1

表单未经过验证，因为您的onblur事件正在jquery-unobtrusive-ajax.js中缩短提交流程。

相反，请将两个字段的onblur事件更改为以下内容：

$(this).parents('form:first').find(':submit')[0].click();

这将调用jquery.unobtrusive-ajax.js脚本，导致在向服务器提交Ajax之前进行验证。

<强>更新

当我回顾你的观点时，我看到你正在为你的财产打电话@Html.ValidateFor()。这会在@Html.ValidationSummary创建的div之外创建HTML标记。

因为此标记超出了不显眼的验证所期望的范围，所以此标记永远不会被覆盖，并且将始终保留。删除@ Html.ValidateFor（）行。如果您需要在初始加载后获得验证消息，请在document.ready上调用validate（）来设置验证消息。

Answer 2

因为我还没有找到解决这个问题的正确方法，所以我决定简单地定位validation-summary-errors div并添加类display：none;对李元素。这会隐藏在提交表单之前未被清除的验证错误。

$('#form_errors').children('div.validation-summary-errors').children('ul').children('li').css('display','none')

必须有一个更好的解决方案，但我已经尝试了一切，并且无法弄清楚为什么我强制验证的尝试不起作用。

具有无阻碍验证错误的MVC Ajax表单不会消失

2 个答案: