为什么 <form> 被赋予 NoValidate 属性？答案

【问题标题】：Why is <form> being given NoValidate attribute?为什么 <form> 被赋予 NoValidate 属性？
【发布时间】：2013-01-21 12:10:20
【问题描述】：

无法让 jQuery Validate 插件正常运行。

型号

public class FooVM
{
    [Required]
    public string Name { get; set; }
}

布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="@Url.Content("~/scripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/scripts/jquery-migrate-1.0.0.min.js")" type="text/javascript"></script>
        <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>
        <script src="@Url.Content("~/scripts/bootstrap.min.js")" type="text/javascript"></script>
        <link href="@Url.Content("~/content/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
        <title>@ViewBag.Title</title>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="span12">
                <div class="navbar">
                    <div class="navbar-inner">
                        <a class="brand" href="#">idoneit</a>
                        <ul class="nav">
                            <li class="menu-link">@Html.ActionLink("Home", "index", "bar")</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="span12 error-container">

            </div>
            <div class="span12 main-body">
                @RenderBody()
            </div>
        </div>
    </div>
    </body>
</html>

查看

model bootstrapvalidate.Models.FooVM
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm("add", "bar", FormMethod.Post, new { @class = "form-horizontal" }))
{
    <fieldset>
        @Html.ValidationSummary()
        <legend>Testing Bootstrap & Validate</legend>
        <div class="control-group">
            <label for="Name" class="control-label">Name</label>
            <div class="controls">
              @Html.TextBoxFor(x => x.Name) 
            </div>
            <button type="submit" class="btn">Add!</button>
        </div>
    </fieldset>
}

当我提交时，错误消息会短暂显示，然后表单仍会发回。

我注意到的一件我以前没有见过的事情是标记包含“novalidate”属性

<form action="/bar/add" class="form-horizontal" method="post" novalidate="novalidate">

根据我阅读的内容，这是阻止验证的 HTML5 属性。所以是的，这就是我认为的原因。

问题是 - 为什么将 bejesus 添加到表单中？我没有要求！

编辑：根据@rob 的回答做了一些挖掘，似乎jquery validate 抛出了一个异常，因此回发..

这是 jquery.validate 1.10

【问题讨论】：

根据plugin's page，1.10 版仅通过 jQuery 1.8 进行了测试。

标签： asp.net-mvc html jquery-validate

【解决方案1】：

novalidate 属性由 jquery.validate 第 32 行添加：

// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');

如果您使用的是 HTML5，then remove the attribute:

$("#contactForm").validate();
$("#contactForm").removeAttr("novalidate");

在您的web.config 中，确保您有：

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

还要确保它们没有被注释掉。

【讨论】：

好声音 - 但它们都在那里，没有被注释掉
澄清一下，我的理解是 novalidate 应该在那里关闭 HTML5 验证，因为您不希望 HTML5 验证（在浏览器中实现）和 jQuery 验证两者都是尝试验证表单，因为它们会产生重复的错误弹出窗口，会很混乱。
Aaron 的评论是添加“为什么”novalidate 的真正答案。这有点欺骗性，因为听起来您正在禁用验证，但您只是在浏览器中禁用它，这允许 jquery 选择它来处理它。这使得跨浏览器的体验更加一致（因为每个浏览器的处理方式可能略有不同）并且 JQuery 的（错误你的）实现可能会做得更好（例如显示所有验证问题而不是一次执行一个）跨度>

【解决方案2】：

我认为这确实是一个措辞不佳的问题。

本质上问题根本不是novalidation 属性（正如@robasta 所说）。

我无法让 jQuery 1.9 和 jQuery.Validate 1.10 正常运行。切换回 jQuery 1.83 后立即修复了它，一切正常。

【讨论】：

1.10 版仅通过 jQuery 1.8.x 进行了测试
在玩之前会教我更彻底，我只是真的想尝试一下Boostrap :)
你最好报告一个错误，它帮助了我（我希望还有很多人）与一个照片库
我想知道是否支持jquery 1.10 + jquery 迁移插件？我要知道了……
我刚刚使用 jQuery.validate v1.14 遇到了这个问题，所以看起来仍然是一个问题。解决方案仍然是不将 jQuery 升级到 1.8.3 以上（令人失望）

【解决方案3】：

通过快速扫描并阅读以前的 cmets，我注意到如果您在表单中的任何项目上具有 data-val=true 属性，则 novalidate 属性将由 jquery.validate 自动插入。

这是有道理的，因为如果您正在使用这些属性，那么您不打算通过验证，因此 novalidate 属性；但是，通过阅读 w3schools 上的 html5 novalidate 属性，您可以覆盖默认的 novalidate；新的jquery.validate 脚本必须考虑到这一点。

我认为这是瘦的，如果有人同意，请告诉我。

【讨论】：

【解决方案4】：

改变

// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');

到

// Add novalidate tag if HTML5.
    if (typeof (Worker) !== "undefined") { this.attr('novalidate', 'novalidate');

【讨论】：

【解决方案5】：

用于默认的 jquery 表单验证在 Html.BeginForm 中添加此属性 @novalidate=""

【讨论】：