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

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

更新：添加jquery标记,因为这可能连接到验证插件

我有MVC 3版本,System.Web.Mvc产品版本是：2011年1月5日修改的3.0.20105.0 – 我认为这是最新版本.

我注意到客户端验证在我们正在创建的应用程序中假设不起作用,所以我做了一个快速测试.

我使用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>

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

当我将进入/测试/创建客户端验证时,大多数情况下仅适用于标题和年龄字段,单击创建后,它适用于所有字段(创建不会转到服务器).

但是在某些情况下(在构建之后)标题验证不起作用,电子邮件是,或CardNumber或Title和CardNumber但电子邮件不是.但在单击“创建”之前,从未进行过所有验证

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

@{ Html.EnableClientValidation(); }

我是providing a source code for this sample on dropbox – 也许我们的开发环境坏了：/我已经完成了对IE 8和Chrome 10 beta的测试.

以防万一,在Web配置验证脚本中启用：

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

所以我的问题是

有没有办法确保客户端验证能够正常工作而不是间歇性工作？

这是一个理想的行为,我在配置/实现中缺少一些东西吗？

更新：如果你在javascript中设置至少一个断点,但没有它不起作用

更新：添加jquery标记,因为这可能连接到验证插件

解决方法

使用不显眼的验证时 – 实时客户端验证仅在首次提交后才起作用.在执行表单的第一次客户端验证(只需单击“提交”)之前,对未初始化且不起作用的字段进行实时验证.