MVC3部分视图中的客户端验证一半工作答案

【问题标题】：Client side validation in MVC3 partial view half workingMVC3部分视图中的客户端验证一半工作
【发布时间】：2012-06-19 14:27:35
【问题描述】：

我在 MVC3 中的帐户创建表单上遇到客户端验证问题。我在模型上使用数据注释，视图是局部视图。当我在局部视图中运行它时，只有两个字段正在验证。当我将代码放在常规视图中时，所有字段都正在验证中。

搜索后，这似乎是一个常见问题，但这种情况似乎有所不同，因为它“工作一半”，这意味着我确信 .js 库已加载并且至少可以正常工作。我没有用 Ajax 加载任何似乎会导致问题的东西。我正在使用 jquery 1.5.1 和 jquery.validate 1.8.0，它们是安装 MVC3 时附带的 IIRC。

有没有人看到/解决过这类问题？

这是我的看法：

<%: Html.Hidden("Bounce", Model.Bounce)%>

<div class="editor-label"><label for="FirstName">First Name</label></div>
<div class="editor-field">
    <%: Html.TextBox("FirstName", Model.FirstName)%><br />
    <%=Html.ValidationMessage("FirstName")%>
</div>

<div class="editor-label"><label for="MiddleName">Middle Name</label></div>
<div class="editor-field">
    <%: Html.TextBox("MiddleName", Model.MiddleName)%><br />
    <%=Html.ValidationMessage("MiddleName")%>
</div>

<div class="editor-label"><label for="LastName">Last Name</label></div>
<div class="editor-field">
    <%: Html.TextBox("LastName", Model.LastName)%><br />
    <%=Html.ValidationMessage("LastName")%>
</div>

<div class="editor-label"><label for="Email">Email</label></div>
<div class="editor-field">
    <%: Html.TextBox("Email", Model.Email)%><br />
    <%=Html.ValidationMessage("Email")%>
</div>

<div class="editor-label"><label for="Password1">Password</label></div>
<div class="editor-field">
    <%: Html.Password("Password1",Model.Password1)%><br />
    <%=Html.ValidationMessage("Password1")%>
</div>

<div class="editor-label"><label for="Password2">Confirm Password</label></div>
<div class="editor-field">
    <%: Html.Password("Password2",Model.Password2)%><br />
    <%=Html.ValidationMessage("Password2")%>
</div>

<div class="form-controls"><input type="submit" value="Create Account" /></div>

视图正在被渲染

<% Html.RenderPartial("create", new CustomerCreationRequest()); %>

这是模型

public class CustomerCreationRequest
{


    [Required(ErrorMessage = "First Name is required")]
    public string FirstName { get; set; }

    public string MiddleName { get; set; }

    [Required(ErrorMessage = "Last Name is required")]
    public string LastName { get; set; }

    [Required(ErrorMessage = "Email Address is required")]
    public string Email { get; set; }

    [Required(ErrorMessage = "Password is required")]
    public string Password1 { get; set; }

    [Compare("Password1", ErrorMessage = "The password and confirmation do not match.")]
    [Required(ErrorMessage = "Password confirmation is required")]
    public string Password2 { get; set; }

    public string Bounce { get; set; } //bounce
}

正常工作的两个字段是 Password1 和 Password2 字段。两种验证规则也都有效（即要求和比较）。所有其他字段都未经过验证，并且允许在空白时提交表单。

更新

查看生成的标记时，前 4 个正常输入字段中不存在 data-val-required 字段，但出现在最后 2 个密码字段（有效的）中。

更新 2

在表单被提交并被服务器拒绝后，data-val-required 字段确实出现并且所有输入都正常工作并且正在验证。只有在初始加载时，它们才会出现在密码字段中。

【问题讨论】：

这可能不是问题，但你还在使用不显眼的验证吗？
是的，我在 web.config 中有
我希望你也包含了 jquery.unobtrusive-ajax.js 库？
是的。我包括 jquery.min、jquery.validate.min 和 validate.unobtrusive.min
您是否检查过您的操作方法中 this.ModelState.IsValid 的值？如果是真的，你就知道问题不在于 JavaScript。如果它是假的，你知道它是。

标签： javascript asp.net-mvc asp.net-mvc-3 jquery-validate

【解决方案1】：

我希望这主要是由于库不匹配（可能是 jquery 验证库）。当我创建一个新的 MVC 3 项目时，我没有看到版本号。在 jquery 验证库中。

请使用 nuget 将库更新到最新版本。

PM> 安装包 jQuery

PM> 安装包 jQuery.Validation

PM> 安装包 jQuery.Validation.Unobtrusive

【讨论】：

我在 nuget 中更新了 jquery，但仍然遇到同样的问题。我现在在 jquery 1.7.2 jquery.validate 1.9.0 上（版本号在源文件的标题中）。我没有在 validate.unobtrusive 文件中看到版本号。在包管理器日志中它说它安装了 2.0.20505.0

【解决方案2】：

我正在将代码更新为 MVC 并使用强类型视图，并且在以前的版本中，控制器中有一段代码将这些命名字段写入 ViewData。例如

        ViewData["loginError"] = "";
        ViewData["createError"] = "";
        ViewData["firstName"] = "";
        ViewData["middleName"] = "";
        ViewData["lastName"] = "";
        ViewData["email"] = "";

当我删除这些时，一切正常。

【讨论】：