asp.net mvc客戶端驗證不起作用？

出於某種原因，我的客戶端驗證似乎並不奏效：asp.net mvc客戶端驗證不起作用？

這裏是我的html：

@using (Html.BeginForm("Create", "Home", FormMethod.Post)) 
{ 

<hr /> 

@Html.ValidationSummary(true) 
<hr /> 

<p> 
    <label>Select Client_ID: </label> 
    <span class="field"> 
     <select name="clientId" id="clientId"> 
      @foreach (var item in Model.ClientId) 
      { 
       <option value="@item">@item</option> 
      } 
     </select> 
    </span> 
</p> 

<p> 
    <label>@Html.LabelFor(model => model.UserModel.name)</label> 
    <span class="field"> 
     @Html.EditorFor(model => model.UserModel.name) 
    </span> 
    @Html.ValidationMessageFor(model => model.UserModel.name) 

</p> 

<p> 
    <label>@Html.LabelFor(model => model.UserModel.password)</label> 
    <span class="field"> 
     @*<input name="password" id="password" type="password" />*@ 
     @Html.EditorFor(model => model.UserModel.password) 
    </span> 
    @Html.ValidationMessageFor(model => model.UserModel.password) 
</p> 

<p> 
    <label>@Html.LabelFor(model => model.UserModel.email)</label> 
    <span class="field"> 
     @*<input name="email" id="email" type="email" />*@ 
     @Html.EditorFor(model => model.UserModel.email) 
    </span> 
    @Html.ValidationMessageFor(model => model.UserModel.email) 
</p> 

<p> 
    <label>Select: </label> 
    <span class="field"> 
     <select name="accessLevel" id="accessLevel"> 
      <option value="3">Company</option> 
      <option value="5">End-User</option> 
     </select> 
    </span> 
</p> 

<input type="submit" value="Submit" />

這裏是我的模型：

public class CreateUserModel 
{ 
    [Required] 
    [Display(Name = "Client_ID")] 
    public string clientId { get; set; } 

    [Required(ErrorMessage = "A name is required")] 
    [MaxLength(20), MinLength(2, ErrorMessage = "Name must be 2 character or more")] 
    [Display(Name = "Name")] 
    public string name { get; set; } 


    [Display(Name = "Email Address")] 
    [Required(ErrorMessage = "Email is Required")] 
    [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" + 
         @"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" + 
         @".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$", 
         ErrorMessage = "Email is not valid")] 
    public string email { get; set; } 

    [Required] 
    [MaxLength(20), MinLength(6, ErrorMessage = "Password Must be 6 or more chataters long")] 
    [Display(Name = "Password")] 
    public string password { get; set; } 

    [Required] 
    public int accessLevel { get; set; } 
}

和我有客戶端在網絡配置中啓用：

<appSettings> 
<add key="webpages:Version" value="3.0.0.0" /> 
<add key="webpages:Enabled" value="false" /> 
<add key="ClientValidationEnabled" value="true" /> 
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

{編輯}添加呈現的HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Home Page - My ASP.NET Application</title> 
<link href="/Content/bootstrap.css" rel="stylesheet"/> 
<link href="/Content/site.css" rel="stylesheet"/> 

<script src="/Scripts/modernizr-2.6.2.js"></script> 

</head> 
<body> 
<script src="/Scripts/jquery.validate.js"></script> 
<div class="jumbotron"> 
<h1>Add Users to the website</h1> 
</div> 
<form action="/Home/Create" method="post"> <hr /> 
<hr /> 

<p> 
    <label for="UserModel_name">Name</label> 
    <span class="field"> 
     <input type="text" name="name" /> 
    </span> 
    <span class="field-validation-valid" data-valmsg-for="UserModel.name" data-valmsg-replace="true"></span> 

</p> 
<p> 
    <label for="UserModel_password">Password</label> 
    <span class="field"> 
     <input name="password" id="password" type="password" /> 
    </span> 
    <span class="field-validation-valid" data-valmsg-for="UserModel.password" data-valmsg-replace="true"></span> 
</p> 
<p> 
    <label for="UserModel_email">Email Address</label> 
    <span class="field"> 
     <input name="email" id="email" type="email" /> 
    </span> 
    <span class="field-validation-valid" data-valmsg-for="UserModel.email" data-valmsg-replace="true"></span> 
</p> 
<p> 
    <label>Select: </label> 
    <span class="field"> 
     <select name="accessLevel" id="accessLevel"> 
      <option value="3">Company</option> 
      <option value="5">End-User</option> 
     </select> 
    </span> 
</p> 
<input type="submit" value="Submit" /> 
</form> 
    <hr /> 
    <footer> 
     <p>&copy; 2014 - My ASP.NET Application</p> 
    </footer> 
</div> 

<script src="/Scripts/jquery-2.1.0.js"></script> 

<script src="/Scripts/bootstrap.js"></script>

來源

2014-02-24 Zapnologica

您是否已經在捆綁包中加載了正確的js文件？ –

jquery.validate.js – Zapnologica

是的，應該是這樣的 –

你的問題很可能是你在你的文件的底部有jQuery的，但你在頂部放jquery.validate。 jQuery必須在jQuery.validate之前。我建議始終將jQuery放在標題中，而不是放在body中，它應該是modernizr之後的第一個東西。

另外，你確實知道jQuery 2.x不能在IE8礦前工作，對嗎？

來源

2014-02-24 17:06:21

@Charlie回答說，這是我猜的順序，如果我把'jquery.js'和'jquery.validate.js'之間的任何其他腳本文件用於客戶端驗證不起作用，那麼我就可以使用它。 – stom

由於某些原因，Html幫助程序沒有在輸入中生成驗證屬性（data-val =「true」和其他），請檢查該屬性。此外，檢查其中的JavaScript庫加載順序：

<script src="~/Scripts/jquery.js"></script>  
<script src="~/Scripts/jquery.validate.js"></script>  
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

來源

2014-04-25 23:07:27 Charlie

有時會發生**如果您使用CDN **，請檢查[this]（http://stackoverflow.com/a/37410471/2218697）。希望有助於某人。 – stom

用途：

@Html.EditorFor

相反的：

<input>

當然，你需要的jquery.validate.*腳本

來源

2016-11-08 16:23:10

看來你的jquery.validate.js位置錯誤。它必須在主jquery ref之後。

對於MVC 5，它應該是如下：

_Layout.cshtml：（頁面底部）

<body> 
... 
... 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@Scripts.Render("~/bundles/jqueryval") <!-- *required for client side validation! --> 
@RenderSection("scripts", required: false) 
</body>

其中~/bundles/jqueryval在BundleConfig.cs定義：RegisterBundles（）方法：

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
      "~/Scripts/jquery.validate*"));

來源

2016-11-14 12:26:14

試試這個：您的驗證失敗，因爲ÿ在你的頁面，該頁面可能已經在你的腳本文件夾被更新到新版本的底部OU都硬編碼這個jQuery鏈接版本：

<script src="/Scripts/jquery-2.1.0.js"></script>

所有你需要做的就是去「腳本」，看到如果存在「jquery-2.1.0.js」文件或者您將JQuery更新爲新版本。輸入較新版本的文件名稱（如果找到），然後重新測試。它現在應該工作。截至2017年6月，我們使用的是JQuery 3.1版本。1

這發生在我身上，我把我的頭髮拉出來，直到我意識到我更新了JQuery並看到它刪除了舊版本。我敢打賭，這是你的問題。如果你沒有這樣做，我建議你不要使用視圖頁面模板來保存View Pages中的驗證腳本，而是創建一個簡單的用戶控件或者主頁面或者佈局視圖頁面，並且在那裏填充你的JQuery鏈接，這樣它們就可以被所有人共享項目頁面。瀏覽器自然會第一次緩存這些頁面，所以即使它們不在其他頁面上使用，它們也不會再次加載。

來源

2017-06-20 07:31:12 Stokely

不確定是否正在動態加載（例如，使用Ajax加載部分視圖）。如果是這樣，那麼你需要用成功的驗證器解析html，例如使用類似...

$.validator.unobtrusive.parse(".target");

E.g.

function loadAPartialView(endPoint) {      
       $.ajax({ 
        url: endPoint, 
        type: 'GET', 
        cache: false, 
        success: function (result) { 

         $('.target').html(result); 
         $('.target').show(); 

         // IMPORTANT. Next line is required to get the client side validation to run. 
         $.validator.unobtrusive.parse(".target"); 
         $(".loadingMessage").hide(); 
        }, 
        error: function (result) { 
          // Error message... 
          $(".loadingMessage").hide(); 

        } 
       }); 
      };

來源

2018-01-23 09:32:25 CYoung

asp.net mvc客戶端驗證不起作用？

回答

相關問題