Html 为什么 <form> 被赋予 NoValidate 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14438325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is <form> being given NoValidate attribute?
提问by glosrob
Having trouble getting jQuery Validate plugin to play nice.
无法让 jQuery Validate 插件发挥作用。
Model
模型
public class FooVM
{
[Required]
public string Name { get; set; }
}
Layout
布局
<!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>
View
看法
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>
}
When I submit, the error message is briefly shown and then the form posts back anyway.
当我提交时，错误消息会被简要显示，然后表单无论如何都会回发。
One thing I have noticed which I have not seen before is that the markup contains the 'novalidate' attribute
我注意到的一件事我以前从未见过是标记包含“novalidate”属性
<form action="/bar/add" class="form-horizontal" method="post" novalidate="novalidate">
From the bits I have read, this is HTML5 attribute that prevents validation. So yeah, this is what is causing it I assume.
从我读过的内容来看，这是阻止验证的 HTML5 属性。所以是的，这就是我假设的原因。
Question is - why the bejesus is it being added to the form? I've not asked for it!
问题是 - 为什么将 bejesus 添加到表单中？我没有要求！
edit: did a bit of digging based on @rob 's answer, it seems jquery validate is throwing an exception, hence the postback..
编辑：根据@rob 的回答做了一些挖掘，似乎 jquery validate 抛出异常，因此回发..
this is jquery.validate 1.10
这是 jquery.validate 1.10
采纳答案by glosrob
This was really a poorly worded question on my part I think.
我认为这确实是一个措辞不佳的问题。
Essentially the issue was not the novalidationattribute at all (as @robasta said).
本质上，问题根本不是novalidation属性（正如@robasta 所说）。
I couldn't get jQuery 1.9 and jQuery.Validate 1.10 to play nicely. Switching back to jQuery 1.83 fixed it straight away, all working as I'd expect.
我无法让 jQuery 1.9 和 jQuery.Validate 1.10 很好地发挥作用。切换回 jQuery 1.83 立即修复了它，一切都按我的预期工作。
回答by robasta
The novalidateattribute is added by jquery.validate line 32:
该novalidate属性由 jquery.validate 第 32 行添加：
// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');
If you are using HTML5, then remove the attribute:
如果您使用的是 HTML5，则删除该属性：
$("#contactForm").validate();
$("#contactForm").removeAttr("novalidate");
In your web.config, make sure you have:
在您的 中web.config，请确保您拥有：
<appSettings>
...
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
Also make sure they are not commented out.
还要确保它们没有被注释掉。
回答by Nick LeBlanc
From a quick scan and reading through previous comments, I am noticing that if you have the data-val=trueattribute on any of the items in the form, the novalidate property will automatically be inserted by jquery.validate.
通过快速浏览和阅读之前的评论，我注意到如果您data-val=true在表单中的任何项目上具有该属性，则 novalidate 属性将被jquery.validate.
This makes sense because if you are using those attributes then there is something that you do not intend to go through validation, hence the novalidate attribute; however, by reading up on the html5 novalidateproperty on w3schools, you can overwrite the default novalidate; the new jquery.validatescript must account for this.
这是有道理的，因为如果您正在使用这些属性，那么您不打算通过验证，因此使用 novalidate 属性；但是，通过阅读novalidatew3schools上的 html5属性，您可以覆盖默认值novalidate；新jquery.validate脚本必须考虑到这一点。
I think that's the skinny, let me know if anyone agrees.
我认为这很瘦，如果有人同意，请告诉我。
回答by legendJSLC
change
改变
// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');
to
到
// Add novalidate tag if HTML5.
if (typeof (Worker) !== "undefined") { this.attr('novalidate', 'novalidate');
