Jquery MVC 4客戶端驗證不起作用

我想在一個簡單的MVC 4應用程序上使用jQuery驗證插件 - 我在MVC 3中完成了一些沒有問題的工作，但是我無法工作在所有。Jquery MVC 4客戶端驗證不起作用

我想在下列情況下啓動驗證：

1 - 我的控件失去焦點。

2-對錶單提交。

任何想法，我已經錯過了將不勝感激！

在_Layout.cshtml腳本引用

<!-- language-all: lang-html --> 
<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title - AWC Web Console</title> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <meta name="viewport" content="width=device-width" /> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script> 

</head>

在文件準備功能應用

<script type="text/javascript"> 

     $(document).ready(function() { 

     alert("doc ready"); 

     // JQuery client validation 
     $("#prodIdFilterForm").validate(
      { 
       onsubmit: true, 
       rules: { 
        productId_str: {required: true, minlength: 10, number:true } 
       }, 
       messages: { productId_str: "product Id must be entered" }, 
       // Force validation when control looses focus 
       onfocusout: function (element) { 
        alert("onfocusout"); // not entering this block ! 
        $("#productId_str").removeAttr('style'); 
        $("#productId_str").valid(); // fire validation 
        $(element).valid(); 
       } 
       , 
       showErrors: function (errorMap, errorList) 
       { 
        if (errorList.length > 0) 
        { 
         for (var i = 0; i < errorList.length; i++) 
         { 
          $("#" + errorList[i].element.id).css({ 'background-color': '#FFDFDF' }); 
         } 
        } 
       } 
      } 
      ); 

    }); // DocReady 

</script>

身體組成標記Index.cshtml標記與驗證JS

@{ ViewBag.Title = "Messages"; Layout = "~/Views/Shared/_Layout.cshtml"; } @using (Html.BeginForm("SelectProduct", "WMSMessages", Model, FormMethod.Post, new { @id = "prodIdFilterForm"})) { <fieldset class="filtering"> <legend>SelectExtensions Product</legend> <div> <b>Product Id:</b> @Html.TextBoxFor(model => model.productId_str, new { @id ="productId_str"} ) <div class="filterSubmitBox"> <input type="submit" value="Show Messages" /> </div> </div> </fieldset> }

來源

2013-03-01 andrewe

順便說一句 - 我知道docready 標記 - 我不習慣在我的帖子中格式化代碼（新手！） – andrewe 2013-03-01 09:24:07

我不敢相信 - 我刪除了_Layout.cshtml中引用的第三個腳本：驗證開始工作 - 任何人都可以讓我理解爲什麼？ – andrewe 2013-03-01 09:37:17

查看我的回答獲取詳細解釋 – 2013-03-01 10:12:50

對於客戶端validataion microsoft使用jquery.validate.unobtrusive.js文件。 Client side validation asp.net mvc

啓用客戶端驗證

啓用客戶端驗證在ASP.NET MVC 3，你必須設置兩個標誌，你必須包括三個JavaScript文件。

打開應用程序的Web.config文件。驗證 ClientValidationEnabled和UnobtrusiveJavaScriptEnabled在應用程序設置中設置爲 true。從根 Web.config文件下面的片段顯示了正確的設置：

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

設置UnobtrusiveJavaScriptEnabled爲true使不顯眼的Ajax和不顯眼的客戶端驗證。當您使用不顯眼的驗證時，驗證規則將轉換爲HTML5屬性。 HTML5屬性名稱可以只包含小寫字母，數字和破折號

例如，如果您聲稱需要電子郵件的attribue及其錯誤消息。它會像這樣將數據屬性附加到元素。

<input data-val="true" 
     data-val-required="Email is required (we promise not to spam you!)." 
     id="Email" name="Email" type="text" value="" />

將ClientValidationEnabled設置爲true可啓用客戶端驗證。通過在應用程序Web.config文件中設置這些鍵，您可以爲整個應用程序啓用客戶端驗證和不顯眼的JavaScript。

更多信息：您還可以使用下面的代碼啓用或禁用個人意見或控制器方法這些設置

來源

2013-03-01 10:08:25

拉維 - 感謝您的背景資料 - 安德魯 – andrewe 2013-03-01 11:05:08

感謝您的支持！如上所述，我必須確保js文件「jquery.validate.unobtrusive.js」已加載，並且我將這兩個條目添加到web.config中。 – 2016-12-21 20:34:07

Jquery MVC 4客戶端驗證不起作用

回答

相關問題