MVC4 中不显眼的客户端验证不起作用答案

【问题标题】：Unobtrusive Client side validation in MVC4 not workingMVC4 中不显眼的客户端验证不起作用
【发布时间】：2013-05-21 19:35:37
【问题描述】：

我有一个包含所有脚本的布局页面，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Site</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <some custom css>
    <modernizr>
    <script src="~/Scripts/Jquery/jquery-1.9.1.js"></script>
    <script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script>
    <script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script>
    <some custom scripts>
    <bootstrap scripts>
    <knockout scripts>           
</head>
<body>
  @RenderBody()
</body>
</html>

然后我就有了如图所示的注册表

@model Mysite.Models.Account.Account
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "register" }))
{
 @Html.AntiForgeryToken();
 <h1>Login</h1>
 @Html.ValidationSummary();
 @Html.EditorFor(m => m.Name)
 @Html.EditorFor(m => m.Address1)
 @Html.EditorFor(m => m.Address2)
 @Html.EditorFor(m => m.Phone1)
<input type="button" value="Register" id="btn1" />
}
<script>
var form = $("#register");
 $("#btn1").click(function (e) {
        e.preventDefault();
        $.ajax({
            url: 'http://localhost:3885/Account/Register',
            data: form.serialize(),
            type: 'POST',
            success: function (result) {},
            error: function (req, status, error) {
                function(req, status, error);
            }
        });
    });
</script>

我的帐户模型类如下：

public class Account
{
   public Name name {get; set;}
   public Address Address1 {get; set;}
   public Address Address2 {get; set;}
   public Phone Phone1 {get;set;}
}

其中每个属性也是一个模型类，例如具有自己的 EditorTemplates

public class Name
{
   [Required]
   public string FirstName {get; set;} 
   public string MiddleName {get; set;}
   [Required]
   public string LastName {get; set;}
}

并具有如下 Name.cshtml EditorTemplate

<div >
 @Html.TextBoxFor(m=>m.FirstName);
 @Html.TextBoxFor(m=>m.MiddleName);
 @Html.TextBoxFor(m=>m.LastName);
<div>

Address.cshtml 和 Phone.cshtml 类似

在 web.config 中：-

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

单击空表单上的注册按钮时，它会通过 ajax 发布到注册 [HttpPost] 控制器方法。为什么它不给我客户端验证消息，我认为它称为不显眼的验证？我也没有在控制台中看到任何错误。

【问题讨论】：

标签： jquery asp.net-mvc jquery-validate unobtrusive-validation client-side-validation

【解决方案1】：

提交按钮必须是“提交”类型才能触发 jquery 验证验证，无论是单独使用 jquery 插件还是与不显眼的插件一起使用。

所以这会触发验证：

<input type="submit" value="Register" id="btn1" />

但鉴于您已经编写了一些代码来处理按钮点击，手动触发验证可能更容易

$("#btn1").click(function (e) {

      e.preventDefault();

      // now trigger the form validation, result is 1 or 0
      var result = $('form').valid();  

      $.ajax(
         // details omitted
      );
});

【讨论】：

它起作用了。只是想知道为什么我们需要显式调用 form.valid()。它不应该在没有显式调用的情况下工作吗？至少这就是我在所有不显眼验证的基本示例中读到的内容。
@user 检查您所遵循的示例，表单可能有提交按钮。该插件执行验证以响应表单的提交事件
我确实使用了提交按钮。它不起作用。它仍然执行 ajax 回发。跟ajax post有关系吗？
您正在使用按钮单击事件。如果您使用表单提交事件，则不需要自己调用 form.valid() ，因为当表单无效时不会触发提交事件。因此，不要使用 $("#btn1").click( 使用 form.submit( 并使该按钮 type="submit".

【解决方案2】：

我认为您需要重新排序脚本引用

<script src="~/Scripts/Jquery/jquery-1.9.1.js"></script>
    <script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>

【讨论】：

+1 在我看来，对我来说，诀窍是移动 jQuery 验证包 above bootstrap js。
天哪。在引导之前移动验证脚本对我们来说完全是这样。

【解决方案3】：

如果您使用的是 _Layout.cshtml，请删除以下参考

@Scripts.Render("~/bundles/jquery")

在底部

这对我有用！

【讨论】：

这个完全没有意义，需要添加jquery脚本。
我认为 jkarlos 可能意味着他引用了 jQuery 两次。

【解决方案4】：

您还需要添加错误消息

@Html.EditorFor(m => m.Name)
@Html.ValidationMessageFor(m => m.Name)

 @Html.EditorFor(m => m.Address1)
@Html.ValidationMessageFor(m => m.Address1)

 @Html.EditorFor(m => m.Address2)
@Html.ValidationMessageFor(m => m.Address2)

 @Html.EditorFor(m => m.Phone1)
@Html.ValidationMessageFor(m => m.Phone1)

【讨论】：

我不这么认为，因为我不想为每个字段显示错误消息，而是在主帐户视图顶部添加了'@Html.ValidationSummary 以显示摘要。
试试这个@Html.EditorFor(m => m.Name.FirstName)

【解决方案5】：

我也遇到过类似的问题，需要几周的时间来调试。我正在使用 aspx 页面。

根本原因是 Html.BeginForm 语句放在了 <table> 标记之后。

<table>
   <% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%>
</table>

这导致<form> 标记在任何<input> 标记之前关闭，因此不显眼的客户端验证不起作用。

<form action="/Admin/ContainerManagement" method="post" novalidate="novalidate"></form> <tr> <td><input></td> </tr>

所以，记得把Html.BeginForm 之前 <table>标签

<% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%>
<table>...</table>
<% } %>

【讨论】：

【解决方案6】：

我有同样的问题，发现如果我打电话 '元素.有效（）' 在库调用验证函数之前，它将不再验证我的表单。我通过创建一个扩展来解决这个问题，该扩展验证表单是否已被处理，并且仅验证元素是否有效

 $.fn.revalidate = function () {
        if (this.length) {
            var validator = this.closest("form").data("validator");
            if (validator)
                validator.element(this);
        }
        return this;
    };

【讨论】：