Validate.unobtrusive和驗證的jQuery庫

Question

我建立一個MVC 3應用程序，它使用了標準模型驗證屬性基本客戶端和服務器驗證。然而，我也有一個表頭，並且使用jQuery validate插件來執行客戶端驗證。

當我不顯眼的庫添加到項目，使用驗證插件無法運行，並保持張貼標題形式。當不包含不顯眼的庫時，頭文件驗證正常，但隨後模型驗證停止。

任何想法我做錯了什麼？

編輯

基本上我有在頭一個登錄表單。我也有一個登錄頁面，也允許登錄。登錄頁面綁定到一個模型，但頭部中的表單不是，它只是HTML。兩種表單都通過jQuery .ajax調用相同的控制器/操作。

我已經失去了使用阿賈克斯方法，它只是似乎沒有被調用，因爲我包含在不顯眼庫的能力。

我把你列入工作的代碼，但隨後驗證完成後，我仍然無法郵寄或執行操作。

我的頭格式爲：

<form id="frmHeaderLogin" action=""> 
<table id="LoginBox" title="Login"> 
    <tr> 
     <td>UserName</td> 
     <td><input type="text" id="Username" name="Username" /></td> 
    </tr> 
    <tr> 
     <td>Password</td> 
     <td><input type="password" id="Password" name="Password" /></td> 
    </tr> 
    <tr> 
    <td colspan="2"><input type="submit" value="Login" id="btnHeaderLogin" name="btnHeaderLogin" /></td> 
    </tr> 
</table> 
</form> 

我有一個提交按鈕這將驗證客戶端輸入，然後創建一個JSON對象作爲參數數據後，提交本服務器click事件。來自服務器的響應也是一個JSON對象。該表單位於佈局文件中，因爲它將在每個頁面上顯示。

主要登錄頁面/圖具有如下的簡單形式：

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "MainLoginForm" })) 
{ 
<div> 
    <fieldset> 
     <p style="color:Red;font-size:medium">@ViewData["Message"]</p> 
     <legend>Login</legend> 
     <div class="editor-label"> 
     @Html.LabelFor(m => m.UserName, "EmailId") 
     </div> 
     <div class="editor-field"> 
     @Html.TextBoxFor(m => m.UserName) 
     @Html.ValidationMessageFor(m => m.UserName) 
     </div> 
     <div class="editor-label"> 
     @Html.LabelFor(m => m.Password, "Password") 
     </div> 
     <div class="editor-field">   
     @Html.PasswordFor(m => m.Password) 
     @Html.ValidationMessageFor(m => m.Password) 
     </div> 
     <p> 
     <input type="submit" id="btnMainLogin" value="Login" /> 
     </p> 
    </fieldset> 
</div> 
} 

這還具有一個jQuery點擊事件時觸發的。阿賈克斯方法和如上張貼JSON對象到服務器。這兩個實例都返回一個JSON對象。

我想在這一點上的問題可能是，我可以使用相同的型號爲標題登錄這是一個佈局文件，該文件會允許我利用客戶端和服務器驗證？

下面是我用的驗證通過後（使用jquery.validate）的submitHandler的例子

$("#formname").validate({ 
    // ..... 
     // ..... 
     submitHandler: function() { 
      var JSONData = new Object(); 
      $(':text, :password', $("table[id$='LoginBox']")).each(function() { 
       JSONData[$(this).attr("id")] = $(this).val(); 
      }); 

      $.ajax({ 
       type: "POST", 
       url: "/Controller/Action", 
       data: "{'Login': '" + JSON.stringify(JSONData) + "'}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (result) { 
        var response = $.parseJSON(result); 
        alert("Header Login Success!"); 
       }, 
       error: function (xhr, status, error) { 
        alert(xhr.statusText + " - ReadyState:" + xhr.readyState + "\n" + "Status: " + xhr.status); 
       } 
      }); 
     } 
    )}; 

Answer 1

如果要混合使用，你有自定義JQuery驗證規則微軟不顯眼的驗證腳本寫在同一頁面中，您將需要添加jQuery驗證規則到現有的表單元素。讓我們舉個例子：

public class MyViewModel 
{ 
    [Required] 
    public string Foo { get; set; } 

    public string Bar { get; set; } 
} 

控制器：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(new MyViewModel()); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     return View(model); 
    } 
} 

查看：

@model MyViewModel 

<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> 
<script type="text/javascript"> 
    $(function() { 
     $('#Bar').rules('add', { 
      required: true, 
      messages: { 
       required: 'Bar is required' 
      } 
     }); 
    }); 
</script> 

@using (Html.BeginForm()) 
{ 
    <div> 
     @Html.EditorFor(x => x.Foo) 
     @Html.ValidationMessageFor(x => x.Foo) 
    </div> 

    <div> 
     @Html.EditorFor(x => x.Bar) 
     @Html.ValidationMessageFor(x => x.Bar) 
    </div> 

    <button type="submit">OK</button> 
} 

通知怎麼就富領域的必需屬性使得它需要我們定義了自定義JQuery驗證規則爲酒吧領域。

而這裏的結果，當表單提交和2場留空：

你當然可以定義任何字段任意數量的自定義規則。