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

本文关键字：表单 Ajax 消失 MVC 无障碍 验证 错误 | 更新日期: 2023-09-27 18:06:59

我遇到了一个问题，表单错误持续在页面上，即使表单是有效的。

我有以下设置:

_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调用，然后它将"成功"发布到div。

然而，这就是问题所在，错误"第一个字段是必需的。"仍然留在页面上。这就好像ajax提交表单在验证获得清除错误的机会之前就通过了，然后它就再也没有机会了。

有什么方法可以让验证仍然删除错误?

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

表单未被验证，因为您的onblur事件使jquery-unobtrusive-ajax.js中的提交过程短路。

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

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

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

当我回头看你的视图时，我看到你正在为你的属性调用@Html.ValidateFor()。这会在@Html.ValidationSummary创建的div之外创建HTML标记。

因为这个标记在不显眼的验证期望它的地方之外，所以这个标记永远不会被覆盖，并且将始终保留。删除@Html.ValidateFor()行。如果您需要在初始加载之后获得验证消息，请在document上调用validate()。可以设置验证消息

因为我还没有找到这个问题的适当解决方案，所以我决定简单地针对validation-summary-errorsdiv并添加类display:none;li元素。这隐藏了在提交表单之前未清除的验证错误。

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

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

相关文章：