2011-05-07 65 views
2

在窗體上使用ASP.NET MVC驗證時,錯誤消息在特定的html中輸出。像例如,如果您要驗證的是必須填寫的文本框,驗證後的輸出失敗會像這樣:ASP.NET MVC驗證 - 如何更改MVC驗證引擎輸出的html?

<label for="MonkeyName">Name: </label> 
<span class="field-validation-error">*</span> 
<br /> 
<input class="input-validation-error" id="MonkeyName" name="MonkeyName" type="text" value="" /> 

在上面的代碼,跨度標籤已被自動驗證框架產生和一個名爲input-validation-error的類被添加到文本框中。但是如果我想讓驗證器生成不同的html呢?

我想使用MVC驗證框架,但是我希望對驗證消息的顯示方式進行全面控制,特別是自從MVC承諾控制UI。我設計的HTML和CSS(甚至在決定使用服務器端編程語言之前)對於錯誤消息是不同的,因爲我想用文本框的容器而不是文本框本身來設置類。以此爲例子:

<dl class="error"> 
    <dt> 
    <label for="email">Email</label> 
     <span class="required">Required</span> 
    </dt> 
    <dd> 
    <input class="textinput_med" id="FromEmail" name="FromEmail" type="text" value="" /> 
    <a href="#"><img src="Content/images/structure/help.png" width="30" height="30" alt="Help" /></a> 
    <span class="errormessage">Some Error</span> 
    </dd> 
</dl> 

雖然我有錯誤消息的跨度,我想設置的集裝箱電子標籤(DL)與命名錯誤CSS類。有沒有一種方法可以確定錯誤消息由驗證框架呈現的方式?

注意:儘管我已經考慮過使用jQuery來檢測具有'input-validation-error'類的表單字段並使用我的自定義css類'錯誤'設置它們各自的容器的解決方案,但我不認爲它是一個很好的解決方案,我認爲這是一個可能更好的解決方法。如果解決了這個問題,我可以從MVC 2升級到MVC 3。

回答

0

聽起來像是你需要編寫編輯他們

namespace HtmlExtensions 
{ 
    public static HtmlString CustomValidateFor(this HtmlHelper helper, ...) 
    { 
     return Edit(helper.ValidateFor(...)) 
    } 
} 
0

一個角度,你可以追求將採取的ASP.NET MVC不引人注目的驗證腳本一切是如何利用搜索內容的不同擴展方法表單中的元素具有data-valmsg-for="inputName"屬性,並用field-validation-error類標記它們。所以,你可以通過添加屬性要將容器與現有功能的工作:

<dl data-valmsg-for="FromEmail" data-valmsg-replace="false"> 
    <dt> 
    <label for="email">Email</label> 
    <span class="required">Required</span> 
    </dt> 
    <dd> 
    <input class="textinput_med" id="FromEmail" name="FromEmail" type="text" value="" /> 
    <a href="#"><img src="Content/images/structure/help.png" width="30" height="30" alt="Help" /></a> 
    </dd> 
</dl> 

然後,<dl>將得到field-validation-error類除了<input>。這裏的缺點是你失去了驗證錯誤信息。如果您使用的是驗證摘要,那麼這可能不是問題(您可以通過在容器中標記data-valmsg-summary="true"並將其放入<ul>來控制該容器)。

如果在框架內工作對您不適用,您可以隨時根據自己的喜好調整jquery.validate.unobtrusive.js。一旦你瞭解了錯誤的樣式/放置代碼,相當簡單(具體來說,請查看第39行和第55行的onErroronErrors函數)。