Почему <form> получает атрибут NoValidate?
У вас возникли проблемы с получением jQuery Validate plugin, чтобы играть приятно.
Model
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 добавляется к форме? Я не просил об этом!
edit: сделал немного копания на основе ответа @rob, кажется, что jquery validate бросает исключение, следовательно, postback..
![Debugging Outcome]()
это jquery.validate 1.10
Ответы
Ответ 1
Это был действительно плохо сформулированный вопрос с моей стороны, я думаю.
По существу, проблема не была атрибутом novalidation
вообще (как сказал @robasta).
Я не мог получить jQuery 1.9 и jQuery.Validate 1.10, чтобы играть красиво. Возвращаясь к jQuery 1.83, он сразу же исправил все, что я ожидал.
Ответ 2
Атрибут novalidate
добавляется по строке jquery.validate 32:
// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');
Если вы используете HTML5, то удалите атрибут:
$("#contactForm").validate();
$("#contactForm").removeAttr("novalidate");
В web.config
убедитесь, что у вас есть:
<appSettings>
...
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
Также убедитесь, что они не закомментированы.
Ответ 3
Из быстрого просмотра и чтения предыдущих комментариев, я замечаю, что если у вас есть атрибут data-val=true
для любого из элементов в форме, свойство novalidate будет автоматически вставлено jquery.validate
.
Это имеет смысл, потому что если вы используете эти атрибуты, то есть что-то, что вы не намерены проходить через проверку, следовательно, атрибут novalidate; однако, прочитав свойство html5 novalidate
в w3schools, вы можете перезаписать по умолчанию novalidate
; новый jquery.validate
script должен учитывать это.
Я думаю, что тощий, дайте мне знать, если кто-то соглашается.
Ответ 4
изменить
// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');
к
// Add novalidate tag if HTML5.
if (typeof (Worker) !== "undefined") { this.attr('novalidate', 'novalidate');