MVC3 客户端验证——我缺少什么？

Question

我用谷歌搜索，查看了博客，在此处查看了多个答案...当我在 MVC3 应用程序中启用“客户端验证”时，验证仅在服务器上进行，而不是在客户端上进行 - 我的表单发布了必需的没有值的文本输入，只会在服务器上退回。

全面披露：在迄今为止我完成的 3 个 MVC 项目中，我从未让它能够一致且完全地工作。我确信我在这里遗漏了一些基本的东西，因为我发现绝大多数示例和操作方法都带有“本文指的是测试版”免责声明......

这通常是我感到沮丧和撕毁的地方所有“客户端的所有内容都必须是间接的和神奇的，因为我们害怕开发人员编写 javascript”垃圾并直接使用 jquery.validation ，但我想我会尝试在这里发帖，看看我是否遗漏了一些基本的东西。 ..就像我通常看起来的那样;)

这个模型：

public class RegisterModel
{
    [Required]
    public string FirstName { get; set; }
    [Required]
    public string LastName { get; set; }
    [Required]
    public string Email { get; set; }
    [Required]
    public string Password { get; set; }
    [Required]
    public string ConfirmPassword { get; set; }
}

这个视图（样式需要“textfield”类）​​：

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <div class="form-item-right">
            @Html.ValidationMessageFor(model => model.FirstName, "First Name is required.")
            @Html.TextBoxFor(model => model.FirstName, new { @class = "textfield" })
            @Html.LabelFor(model => model.FirstName, "First Name")


        </div>

        <div class="form-item-right">
            @Html.ValidationMessageFor(model => model.LastName)
            @Html.TextBoxFor(model => model.LastName, new { @class = "textfield" })
            @Html.LabelFor(model => model.LastName, "Last Name")
        </div>

        <div class="form-item-right">
            @Html.ValidationMessageFor(model => model.Email)
            @Html.TextBoxFor(model => model.Email, new { @class = "textfield" })
            @Html.LabelFor(model => model.Email, "Email Address")

        </div>

        <div class="form-item-right">
            @Html.ValidationMessageFor(model => model.Password)
            @Html.PasswordFor(model => model.Password, new { @class = "textfield" })
            @Html.LabelFor(model => model.Password, "Password")

        </div>

        <div class="form-item-right">
            @Html.ValidationMessageFor(model => model.ConfirmPassword)
            @Html.PasswordFor(model => model.ConfirmPassword, new { @class = "textfield" })
            @Html.LabelFor(model => model.ConfirmPassword, "Confirm")

        </div>

        <div class="form-item-right">
            <input type="submit" value="Sign Up!" class="buttonSignUp"/>
        </div>



}

这会产生如下标记：

            <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="false">First Name is required.</span>
            <input class="textfield" data-val="true" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" value="" type="text">
            <label for="FirstName">First Name</label>

这些脚本通过布局视图包含：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js") "type="text/javascript"></script>

并且在 web.config 中：

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

控制器代码的完整性：

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

    [HttpPost]
    public ActionResult Candidate(RegisterModel model)
    {
        if (ModelState.IsValid)
        {
            //complete the registration

            return View("Confirm", new ConfirmationModel { Email = model.Email, FirstName = model.FirstName });   
        }
        else
        {
            return View(model);
        }
    }

视图中的所有结果这不会在客户端进行验证。表单发布时根本没有输入任何字段。验证仅在服务器上进行（FWIW 正常工作）。

怎么了？

编辑以包含视图中生成的标记。

Answer 1

我不知道您做错了什么，但您可以遵循以下简单步骤：

1. 使用默认模板创建一个新的 ASP.NET MVC 3 项目

2. 定义以下模型：

   公共类MyViewModel
   {
       [必需的]
       公共字符串 Foo { 得到;放; }
   }
   

3. HomeController：

   公共类 HomeController ：控制器
   {
       公共 ActionResult Index()
       {
           返回视图(new MyViewModel());
       }
   
       [http邮报]
       公共 ActionResult 索引（MyViewModel 模型）
       {
           返回视图（模型）；
       }
   }
   

4. 索引视图：

   <前><代码>@model MyViewModel

   ;
   

   @using(Html.BeginForm())
   {
   @Html.LabelFor(x => x.Foo)
   @Html.EditorFor(x => x.Foo)
   @Html.ValidationMessageFor(x => x.Foo)
   <按钮类型=“提交”>确定
   }

5. 运行项目=>客户端和服务器端验证按预期工作