爲什麼<form>被賦予NoValidate屬性？

無法讓jQuery Validate插件發揮出色。爲什麼<form>被賦予NoValidate屬性？

型號

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驗證是拋出一個異常，因此回發..

Debugging Outcome

這是jquery.validate 1.10

來源

2013-01-21 glosrob

由於每[插件的頁面（http://bassistance.de/jquery-plugins/jquery-plugin-validation/），版本1.10已經只通過jQuery 1.8進行了測試。 – Sparky

對我而言，這真的是一個措辭不佳的問題。

基本上這個問題根本不是novalidation屬性（就像@robasta說的）。

我無法讓jQuery 1.9和jQuery.Validate 1.10很好地玩。切換回jQuery 1.83立即修復它，所有工作都如我所料。

來源

2013-01-21 14:01:21 glosrob

版本1.10只通過jQuery 1.8.x進行了測試 – Sparky

在玩遊戲之前會教會我更加徹底，我只是想試試Boostrap :) – glosrob

你最好報告一個bug，它幫助了我（我希望很多其他）與一個照片庫 – vladkras

的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>

另外，還要確保他們沒有被註釋掉。

來源

2013-01-21 12:17:12 robasta

好喊 - 但他們都在那裏，並沒有被註釋掉 – glosrob

我已經更新了答案。 – robasta

爲了澄清，我的理解是'novalidate'應該在那裏關閉HTML5驗證，因爲您不希望HTML5驗證（在瀏覽器中實現）和jQuery驗證都試圖驗證表單，因爲他們會產生重複的錯誤彈出窗口，這將是混亂的。 – AaronLS

從快速掃描和閱讀先前的評論，我注意到，如果您在表單中的任何項目上具有data-val=true屬性，novalidate屬性將自動插入jquery.validate。

這是有道理的，因爲如果你使用這些屬性，那麼有些東西你不打算通過驗證，因此novalidate屬性;但是，通過閱讀w3schools上的html5 novalidate屬性，您可以覆蓋默認的novalidate;新的jquery.validate腳本必須解決這個問題。

我認爲這是皮包骨頭，讓我知道是否有人同意。

來源

2013-05-19 04:47:42

變化

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

到

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

來源

2013-06-29 10:25:08 legendJSLC

爲什麼<form>被賦予NoValidate屬性？

回答

相關問題