Question

当输入在ASP.NET MVC中抛出验证错误时，我试图将输入的边框更改为其他颜色。据我所知，我正确地说它，但唉它不起作用。这主要是一个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样式没有响应.input-validation-error类，即使它说它在视图源中存在。但是，我不是一个CSS大师，所以我希望它是一个简单的我忽略。

非常感谢您的帮助。

Answer 1

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

#error-organizer input.input-validation-error

ASP.NET MVC 4.0中未应用输入验证错误的CSS样式

1 个答案: