css - 更改模型验证错误的 css

Question

我知道输入验证错误类添加到绑定到模型的元素中。但是，如果我的输入字段被设置样式并用 div 包装怎么办：

<div class="inputWide">
    <span class="inputWideSpan"></span>
    @Html.TextBoxFor(m => m.FirstName, new { @class = "wide" })
</div>           

我想更改/添加样式到 Model.FirstName 验证上的 inputWide div 无法更改背景等，可以这样做吗？

Answer 1

这实际上取决于验证是客户端还是服务器端。最好做类似的事情：

<div class="inputWide">
    @Html.LabelFor(m => m.CardNumber)
</div>
<div class="editor-field">
     @Html.TextBoxFor(m => m.FirstName, new { @class = "wide" })
     @Html.ValidationMessageFor(m => m.FirstName)
</div>

使用CSS：

.field-validation-error 
{
    display: block;
    color: #ff0000;
}
.field-validation-valid {
    display: none;
} 
.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}
.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}
.validation-summary-valid {
    display: none;
}

这将呈现类似于：

Answer 2

您需要使用像jQuery Validate Hooks这样的插件