MVC4中不引人注意的客戶端驗證不起作用

我擁有包含所有腳本的佈局頁面，如下所示。MVC4中不引人注意的客戶端驗證不起作用

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>My Site</title> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <some custom css> 
    <modernizr> 
    <script src="~/Scripts/Jquery/jquery-1.9.1.js"></script> 
    <script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script> 
    <script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script> 
    <script src="~/Scripts/Jquery/jquery.validate.js"></script> 
    <script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script> 
    <some custom scripts> 
    <bootstrap scripts> 
    <knockout scripts>   
</head> 
<body> 
    @RenderBody() 
</body> 
</html>

然後，我有我的登記表，如圖

@model Mysite.Models.Account.Account 
@{ 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "register" })) 
{ 
@Html.AntiForgeryToken(); 
<h1>Login</h1> 
@Html.ValidationSummary(); 
@Html.EditorFor(m => m.Name) 
@Html.EditorFor(m => m.Address1) 
@Html.EditorFor(m => m.Address2) 
@Html.EditorFor(m => m.Phone1) 
<input type="button" value="Register" id="btn1" /> 
} 
<script> 
var form = $("#register"); 
$("#btn1").click(function (e) { 
     e.preventDefault(); 
     $.ajax({ 
      url: 'http://localhost:3885/Account/Register', 
      data: form.serialize(), 
      type: 'POST', 
      success: function (result) {}, 
      error: function (req, status, error) { 
       function(req, status, error); 
      } 
     }); 
    }); 
</script>

我的帳戶Model類是如下：

public class Account 
{ 
    public Name name {get; set;} 
    public Address Address1 {get; set;} 
    public Address Address2 {get; set;} 
    public Phone Phone1 {get;set;} 
}

其中每個屬性也有自己的EditorTemplates一個模型類示例

public class Name 
{ 
    [Required] 
    public string FirstName {get; set;} 
    public string MiddleName {get; set;} 
    [Required] 
    public string LastName {get; set;} 
}

，並有Name.cshtml EditorTemplate如下

<div > 
@Html.TextBoxFor(m=>m.FirstName); 
@Html.TextBoxFor(m=>m.MiddleName); 
@Html.TextBoxFor(m=>m.LastName); 
<div>

同樣，對於Address.cshtml和Phone.cshtml

在web.config中： -

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

在點擊空的形式註冊按鈕，它做ajax發佈到註冊[HttpPost]控制器方法。爲什麼它不給我客戶端驗證消息，我認爲它被稱爲Unobtrusive驗證？我在控制檯中也看不到任何錯誤。

來源

2013-05-21 user2232861

提交按鈕的類型必須是「提交」觸發JQuery驗證驗證，無論是自己使用jQuery插件還是使用不顯眼的插件。

因此，這將觸發驗證：

<input type="submit" value="Register" id="btn1" />

但看到你已經寫了一些代碼來處理按一下按鈕，它可能更容易只是手動觸發驗證

$("#btn1").click(function (e) { 

     e.preventDefault(); 

     // now trigger the form validation, result is 1 or 0 
     var result = $('form').valid(); 

     $.ajax(
     // details omitted 
    ); 
});

來源

2013-05-21 20:21:43

它工作。只是想知道爲什麼我們需要顯式調用form.valid（）。它不應該沒有明確的調用工作嗎？至少這是我一直在閱讀所有基本的不顯眼驗證的例子。 – user2232861

@user檢查你正在關注的示例，表單可能已經提交了按鈕。該插件執行驗證以響應表單的提交事件 –

我曾使用submit button.it不起作用，但它仍然會執行ajax回發。這是與ajax文章有關嗎？ – user2232861

我認爲你需要重新排序腳本引用

<script src="~/Scripts/Jquery/jquery-1.9.1.js"></script> 
    <script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script> 
    <script src="~/Scripts/Jquery/jquery.validate.js"></script> 
    <script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script> 
    <script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>

來源

2013-05-21 19:45:47

現在嘗試了。沒有運氣！！！ – user2232861

+1對我來說，我所看到的jQuery驗證包** **上方的bootstrap js有什麼用。 – erdinger

聖潔的廢話。在引導之前移動驗證腳本完全爲我們做了。 –

-1

你也需要添加錯誤信息

@Html.EditorFor(m => m.Name) 
@Html.ValidationMessageFor(m => m.Name) 

@Html.EditorFor(m => m.Address1) 
@Html.ValidationMessageFor(m => m.Address1) 

@Html.EditorFor(m => m.Address2) 
@Html.ValidationMessageFor(m => m.Address2) 

@Html.EditorFor(m => m.Phone1) 
@Html.ValidationMessageFor(m => m.Phone1)

來源

2013-05-21 20:06:37

我不這麼認爲，因爲我不想爲每個字段顯示錯誤消息，而是在主客戶視圖頂部添加了'@Html.ValidationSummary以顯示摘要。 – user2232861

嘗試這個@ Html.EditorFor（m => m.Name.FirstName） –

如果您正在使用_Layout.cshtml刪除後續參考

@Scripts.Render("~/bundles/jquery")

底部

這對我有用！

來源

2014-04-03 03:40:04 jcmordan

這沒有任何意義，你需要添加jQuery腳本。 –

我認爲jkarlos可能意味着他參考jQuery兩次。 – Tony

yeap，就是。謝謝 – jcmordan

我也有類似的問題，需要幾個星期才能調試。我正在使用aspx頁面。

根本原因是Html.BeginForm聲明被放置在<table>標籤之後。

<table> 
    <% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%> 
</table>

這引起了<form>標籤任何<input>標籤之前關閉，從而不顯眼的客戶端驗證無法正常工作。

<form action="/Admin/ContainerManagement" method="post" novalidate="novalidate"></form> <tr> <td><input></td> </tr>

所以，記得把Html.BeginForm以前<table>標籤

<% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%> 
<table>...</table> 
<% } %>

來源

2015-02-09 10:03:43

我有同樣的問題，並發現，如果我叫 'element.valid（）' 庫的調用之前驗證功能發生，比它不會再驗證我的表單。我通過創建一個擴展來解決此問題，該擴展驗證表單是否已處理，並且僅驗證元素是否有效

$.fn.revalidate = function() { 
     if (this.length) { 
      var validator = this.closest("form").data("validator"); 
      if (validator) 
       validator.element(this); 
     } 
     return this; 
    };

來源

2015-10-29 13:08:32

MVC4中不引人注意的客戶端驗證不起作用

回答

相關問題