在ASP.NET MVC 4.0中沒有應用輸入驗證錯誤的CSS樣式

我想在輸入引發ASP.NET MVC中的驗證錯誤時將輸入的邊框改變爲不同的顏色。從我可以告訴我，我正確地ndo，但唉，它不起作用。這主要是一個CSS問題，但我已將所有相關信息發佈到該過程中。在ASP.NET MVC 4.0中沒有應用輸入驗證錯誤的CSS樣式

首先視圖的代碼片段：

@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(true) 
    <div class="form_settings"> 
     <fieldset> 
      <legend>Create New Log</legend> 
      <table id="error-organizer"> 
       <tr class="transparent"> 
        <td class="transparent"> 
         Employee 
        </td> 
        <td class="transparent"> 
        </td> 
       </tr> 
       <tr class="transparent"> 
        <td class="transparent">@Html.EditorFor(model => model.Requestor) 
        </td> 
        <td class="transparent">@Html.ValidationMessageFor(model => model.Requestor) 
        </td> 
       </tr>

我驗證這個模型，不是控制器，使用自定義數據註解。我知道這是有效的，因爲我正在按照預期在瀏覽器中收到錯誤消息。

以下是這個輸入的兩種CSS樣式。

#error-organizer input .input-validation-error 
{ 
    border: 3px solid #cc0; 
} 

.form_settings input, .form_settings textarea, .form_settings select { 
    padding: 5px; 
    margin: 0 0 8px 8px; 
    width: 150px; 
    font: 100% arial; 
    border: 1px solid #6F6147; 
    background: #EFF8FB; 
    color: #47433F; 
    border-radius: 7px 7px 7px 7px; 
    -moz-border-radius: 7px 7px 7px 7px; 
    -webkit-border: 7px 7px 7px 7px; 
}

第一種樣式是錯誤發生時需要應用的樣式。第二種風格是當前優先考慮的默認風格。但是，請注意，如果我從第一個樣式中刪除.input-validation-error，它將一直覆蓋第二個樣式。

最後，這裏是在網站上查看源代碼的相關部分（觸發錯誤後）：

<form action="/QCLogs/Create" method="post"><div class="validation-summary-errors"><ul><li style="display:none"></li> 
</ul></div> <div class="form_settings"> 
     <fieldset> 
      <legend>Create New Log</legend> 
      <table id="error-organizer"> 
       <tr class="transparent"> 
        <td class="transparent"> 
         Employee 
        </td> 
        <td class="transparent"> 
        </td> 
       </tr> 
       <tr class="transparent"> 
        <td class="transparent"><input class="input-validation-error text-box single-line" data-val="true" data-val-number="The field Requestor must be a number." data-val-range="The field Requestor must be between 1 and 9999." data-val-range-max="9999" data-val-range-min="1" data-val-required="The Requestor field is required." id="Requestor" name="Requestor" type="number" value="1234" /> 
        </td> 
        <td class="transparent"><span class="field-validation-error" data-valmsg-for="Requestor" data-valmsg-replace="true">Invalid employee number.</span> 
        </td> 
       </tr> 
       <tr class="transparent"> 
        <td class="transparent"> 
         Type 
        </td> 
        <td class="transparent"> 
        </td> 
       </tr>

從行爲，卻彷彿CSS樣式不響應。輸入即使它說它在視圖源中存在，也是如此。但是，我不是CSS大師，所以我希望這是簡單的，我忽略了。

非常感謝您的幫助。

來源

2013-04-30 Michael Smith

你使用什麼瀏覽器？ – Pinch 2013-04-30 21:06:26

您的選擇器中有一個空間，位於input和.input-validation-error之間。這使它不正確。試試這個：

#error-organizer input.input-validation-error

來源

2013-04-30 21:11:33 mattytommo

我知道這很簡單。看起來我需要研究我的CSS語法！感謝mattytommo。 – 2013-05-01 12:21:01

在ASP.NET MVC 4.0中沒有應用輸入驗證錯誤的CSS樣式

回答

相關問題