更改jQuery自定義樣式以進行驗證，以便將其顯示爲工具提示

Question

我是jQuery的新手，在定製驗證元素（ASP.NET MVC3項目）樣式方面掙扎了一番。我知道我可以更改CSS爲field-validation-error,input-validation-error等，但我想實現如下（使用jQuery 1.5.1和jQuery UI 1.8.11）：

對於標籤/輸入元素組合我想在驗證失敗時更改標籤顏色（現在只有輸入元素的背景顏色變爲淺紅色）。此外，我想顯示一個錯誤圖標在輸入元素的右側（這是有效的），並將錯誤消息作爲工具提示（這不起作用）。

此外，我希望驗證摘要顯示爲一個自定義樣式的工具提示時，懸停在窗體的提交按鈕（不知道如何完成這件事）。

通常，我的表單的驗證確實有效，但我想要如上所述更改元素的樣式。我沒有得到的是爲什麼validate函數似乎沒有觸發（在這裏我想我可以從errorPlacement等開始）。我的代碼如下：

<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> 
$(document).ready(function() 
{ 
    $("form").validate({ 
     debug: true, 
     errorPlacement: function(error, element) 
     { 
      error.insertBefore(element); 
     }, 
     submitHandler: function() 
     { 
      alert("submit"); 
     } 
    }); 
}); 
[...] 
@using(Html.BeginForm()) 
{ 
    [...] 
    <td>@Html.LabelFor(model => model.SomeField)</td> 
    <td> 
     @Html.EditorFor(model => model.SomeField) 
     @Html.ValidationMessagesFor(model => model.ValidFrom) 
    </td> 
    [...] 
    @Html.ValidationSummary(false); 
    <input id="btnSubmit" name="submit" type="submit" value="Send" /> 
} 

儘管設置debug: true和定義alert爲submitHandler我看不到在Firefox網頁開發者控制檯上的任何（驗證有關）輸出。當表單有效時，單擊「提交」按鈕時，我也無法看到alert消息，只會將消息發佈到服務器。我也嘗試明確設置窗體ID並在jQuery中訪問它：

$("#myForm")... 
[...] 
@using(Html.BeginForm("Action","Controler", FormMethod.Post, new { id = "myForm" })) 
{ 
    [...] 

不幸的是，這並沒有改變任何東西。如何設置我的驗證元素，如上所述？爲什麼validate函數不能觸發？

Answer 1

這真的花了我一段時間，包括我必須做/找出/修復的幾件事。首先，我在撰寫本文時更新了最新版本的jQuery (1.9.2)和jQuery UI (1.10.3)。

首先，我不停地想知道爲什麼我所有的嘗試都改變了我的問題中描述的驗證邏輯的行爲。原來，爲ASP.NET MVC你不能只用「正常」的jQuery的例子，你找到這麼多頁，你去驗證一個引用開始：

// #popupDialog and #Formular are the CSS ids of my modal dialog and form. 
var validator = $("#popupDialog").find("#Formular").data("validator"); 

下一步是覆蓋該errorPlacement一個空的功能，否則原來的驗證風格始終得到激活：

validator.settings.errorPlacement = function() { 
}; 

現在比較容易的部分是通過簡單的選擇源自父/子元素來改變元素的樣式前後的實際輸入元素從實際輸入元素：

validator.settings.highlight = function (element) { 
    $(element).parent().parent().find("label:first").addClass("error"); 
    $(element).parent().parent().find("span.required").addClass("error"); 
    $(element).parent().parent().find("input:first").addClass("errorImage"); 
    $(element).parent().parent().find("select:first").addClass("errorImage"); 
    var errorMessage = $(element).attr("data-val-required"); 
    if (errorMessage) { 
     $(element).parent().parent().find("input:first").attr("custom-error-message", errorMessage); 
     $(element).parent().parent().find("select:first").attr("custom-error-message", errorMessage); 
    } 
}; 
validator.settings.unhighlight = function (element) { 
    $(element).parent().parent().find("label:first").removeClass("error"); 
    $(element).parent().parent().find("span.required").removeClass("error"); 
    $(element).parent().parent().find("input:first").removeClass("errorImage"); 
    $(element).parent().parent().find("select:first").removeClass("errorImage"); 
    $(element).parent().parent().find("input:first").attr("custom-error-message", ""); 
    $(element).parent().parent().find("select:first").attr("custom-error-message", ""); 
}; 
validator.settings.errorContainer = "#btnSubmit"; 

有一點需要注意上面的代碼行的是，我沒有使用該錯誤消息，但custom-error-message的title屬性（或者叫它任何你喜歡）。這是由於我有無效的DropDownList控件的問題 - 我無法點擊箭頭並從列表中選擇一個項目，因爲控件直接失去焦點（這也是我通過手動設置title時發現的一個問題jQuery中的.attr(...而不是.prop(...）。

上面使用的CSS類和樣式可以是任何你喜歡的，此外，你想要樣式的元素可以根據你的需要改變。選擇所需元素可能有更簡單更穩定的方法，但基本上上述解決方案適用於我，如果您遇到類似問題，應該足以讓您開始使用。

對於submit按鈕，我決定以顯示靜態文本，而不是所有無效的控件的錯誤消息的列表，但低於所使用的方法仍然應該幫助，如果你需要添加動態文本：

$(document).tooltip({ 
    position: 
     { 
      my: "left bottom-15px", 
      at: "center top", 
      using: function (position, feedback) { 
       $(this).css(position); 
       $("<div>") 
        .addClass("arrow") 
        .addClass(feedback.vertical) 
        .addClass(feedback.horizontal) 
        .appendTo(this); 
      } 
     }, 
    items: ".errorImage, input[type='submit']", // restrict to certain elements 
    content: function() { 
     var element = $(this); 
     if (element.is("[custom-error-message]")) { 
      return element.attr("custom-error-message"); 
     } 
     else { 
      if ($("#Formular").valid()) { 
       return ""; 
      } 
      else 
      { 
       return "<span class='error'>Input validation</span><br />Some informative text."; 
      } 
     } 
    } 
}); 

如果還有更多的問題，請隨時詢問，我從我自己的經驗中知道，讓整個事情發揮作用可能是一場噩夢，儘管最終看起來並不難。

Answer 2

嘗試把班級修改爲默認設計的asp.net mvc

例如， ：

@Html.ValidationMessageFor(
      model => model.Property1, string.Empty, new 
      { 
       @class = "new-style-error-validation" 
      } 
)