I'm aware of input-validation-error class added to elements bound to the model. But what if my input field is styled and wrapped with div:
<div class="inputWide">
<span class="inputWideSpan"></span>
@Html.TextBoxFor(m => m.FirstName, new { @class = "wide" })
</div>
I would like to change/add styles to the inputWide div on the Model.FirstName validation fail to change background etc, is it possible to do ?
It really depends on whether the validation is client or server side. Better to do something like:
<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>
With 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;
}
Which will render something similar to:
You'll need to use a plugin like jQuery Validate Hooks
