MVC 3 客户端验证间歇性工作

Posted 2023-05-08

【中文标题】MVC 3 客户端验证间歇性工作

【英文标题】：MVC 3 Client Validation works intermittently

【发布时间】：2011-07-03 14:06:39

【问题描述】：

更新：如果你在 javascript 中设置了至少一个断点，验证开始工作，但没有它就不起作用

更新：添加 jquery 标签，因为这可能会连接到验证插件

我有 MVC 3 版本，System.Web.Mvc 产品版本是：3.0.20105.0 修改于 5th of Jan 2011 - 我认为这是最新的。

我注意到客户端验证在我们正在创建的应用程序中无法正常工作，因此我进行了快速测试。

我已经使用 Internet Application 模板创建了基本的 MVC 3 应用程序。

我添加了测试控制器：

using System.Web.Mvc;
using MvcApplication3.Models;

namespace MvcApplication3.Controllers

    public class TestController : Controller
    
        public ActionResult Index()
        
            return View();
        

        public ActionResult Create()
        
            Sample model = new Sample();

            return View(model);
        

        [HttpPost]
        public ActionResult Create(Sample model)
        
            if(!ModelState.IsValid)
            
                return View();
            

            return RedirectToAction("Display");
        

        public ActionResult Display()
        
            Sample model = new Sample();
            model.Age = 10;
            model.CardNumber = "1324234";
            model.Email = "[e-mail]";
            model.Title = "hahah";

            return View(model);
        
    

型号：

using System.ComponentModel.DataAnnotations;

namespace MvcApplication3.Models

    public class Sample
    
        [Required]
        public string Title  get; set; 

        [Required]
        public string Email  get; set; 

        [Required]
        [Range(4, 120, ErrorMessage = "Oi! Common!")]
        public short Age  get; set; 

        [Required]
        public string CardNumber  get; set; 
    

3 次观看：

创建：

@model MvcApplication3.Models.Sample

@
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";


<h2>Create</h2>

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

@*@ Html.EnableClientValidation(); *@

@using (Html.BeginForm()) 
    @Html.ValidationSummary(false)
    <fieldset>
        <legend>Sample</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Age)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.CardNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CardNumber)
            @Html.ValidationMessageFor(model => model.CardNumber)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

    @*<fieldset>

        @Html.EditorForModel()

        <p>
            <input type="submit" value="Create" />
        </p>

    </fieldset>    *@           


<div>
    @Html.ActionLink("Back to List", "Index")
</div>

显示：

@model MvcApplication3.Models.Sample

@
    ViewBag.Title = "Display";
    Layout = "~/Views/Shared/_Layout.cshtml";


<h2>Display</h2>

<fieldset>
    <legend>Sample</legend>

    <div class="display-label">Title</div>
    <div class="display-field">@Model.Title</div>

    <div class="display-label">Email</div>
    <div class="display-field">@Model.Email</div>

    <div class="display-label">Age</div>
    <div class="display-field">@Model.Age</div>

    <div class="display-label">CardNumber</div>
    <div class="display-field">@Model.CardNumber</div>
</fieldset>
<p>
    @Html.ActionLink("Back to List", "Index")
</p>

索引：

@
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";


<h2>Index</h2>

<p>
    @Html.ActionLink("Create", "Create")
</p>

<p>
    @Html.ActionLink("Display", "Display")
</p>

这里的一切都是默认的——创建控制器，从控制器操作中添加视图使用适当的脚手架模板指定模型并使用示例应用程序中提供的布局。

When I will go to /Test/Create 大多数情况下，客户端验证仅适用于 Title 和 Age 字段，单击 Create 后它适用于所有字段（创建不会转到服务器）。

但是在某些情况下（在构建之后）Title 验证不起作用并且Email 是，或者CardNumber 或Title 和CardNumber 但Email 不是。但在单击创建之前，并非所有验证都有效。

我尝试使用 Html.EditorForModel 创建表单，并在 BeginForm 之前强制执行客户端验证：

@ Html.EnableClientValidation(); 

我是providing a source code for this sample on dropbox——可能我们的开发环境坏了：/我已经在 IE 8 和 Chrome 10 beta 上完成了测试。

以防万一，启用网络配置验证脚本：

<appSettings>
  <add key="ClientValidationEnabled" value="true"/> 
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

所以我的问题是

有没有办法确保客户端验证按预期工作而不是间歇性地工作？

这是一种理想的行为，我在配置/实现中遗漏了一些东西吗？

更新：如果你在 javascript 中设置了至少一个断点，验证开始工作，但没有它就不起作用

更新：添加 jquery 标签，因为这可能会连接到验证插件

【问题讨论】：

这也发生在我身上...有什么解决办法吗？？

【参考方案1】：

使用不显眼的验证时 - 实时客户端验证仅在首次提交后才起作用。在执行第一次客户端验证表单之前（只需单击提交），实时验证未初始化且不工作的字段。

【讨论】：

是的，但是对于某些字段，在单击提交之前实时验证正在工作。有时是一个字段，有时几乎是所有字段，但绝不是全部。

投反对票，因为虽然这是正确的，但这不是 OP 的问题

【参考方案2】：

将您的脚本引用放入文档<head>。执行脚本和连接验证的时间可能存在时间问题。

【讨论】：

它有点帮助。它不能实时工作，但如果我将使用表单足够长的时间并且有时会在文本字段中执行双退格，我可以强制所有文本字段进行验证。但这仍然不能解决问题，因为我需要作为用户付出巨大的努力来获取验证信息（太多的努力——点击、制表符、双退格键、删除直到它触发——基本上我需要输入该字段并添加/delete text 乘以 中的脚本来触发它）。

客户端验证基于jquery验证插件。这种行为是设计使然——“在字段被标记为无效之前，验证是惰性的：在第一次提交表单之前，用户可以在字段中切换而不会收到烦人的消息——在获得实际输入正确值的机会“-docs.jquery.com/Plugins/validation。如果单击提交导致验证，则它工作正常。

好的，但是为什么一开始就为某些领域工作呢？ IE。对于 Age 它总是在提交之前工作，并且用户会收到有关验证错误的消息。这也是其他字段的情况，但它并不总是适用于同一组字段 - 有时它仅适用于提交前的年龄，有时它适用于提交前的标题和年龄。如果您将在 JS 中设置断点（例如 FireBug），它适用于所有字段。它不应该那样工作 - 如果它在提交之前不应该工作而不是它不应该 - 但它可以工作。这让用户感到困惑

我不知道。祝你好运。