css - モデル検証エラーのcssを変更します

Question

モデルにバインドされた要素に追加されたinput-validation-errorクラスを認識しています。しかし、入力フィールドがdivでスタイル設定され、ラップされている場合はどうなりますか？

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

Model.FirstName検証で背景などを変更できないinputWidedivにスタイルを変更/追加したいのですが、可能ですか？

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

jQueryValidateHooksのようなプラグインを使用する必要があります