在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样式

回答

相关问题