CSS 样式未在 ASP.NET MVC 4.0 中与输入验证错误一起应用

Question

当输入在 ASP.NET MVC 中引发验证错误时，我正在尝试将输入的边框更改为不同的颜色。据我所知，我做对了，但可惜它不起作用。这主要是一个 CSS 问题，但我已将所有相关信息发布到流程中。

首先是视图的代码sn-p：

@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 样式似乎没有响应 .input-validation-error 类，即使它说它在视图源中。但是，我也不是 CSS 大师，所以我希望这是我忽略的一些简单的东西。

非常感谢您的帮助。

Answer 1

您的选择器中有一个空格，位于input 和.input-validation-error 之间。这使它不正确。试试这个：

#error-organizer input.input-validation-error