Question

Typical behaviour of validation is when there is an error display an asterisk left/right/under the control being validated. This requires of us to plan for the space that will be used by those validation controls (whether it is just an * or some longer message) and as such results in various hack and workarounds either in HTML or in CSS. What I would like with ASP.NET MVC’s built in validation is to not display any new elements but rather just style the existing ones different (like change the color of the textbox control whose validation failed). That way the design and webpage disposition stays intact.

How can I achieve that?

Answer 1

You can add a style to your css like this:

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

You will also want to remove any @Html.ValidationMessageFor(…) or @Html.ValidationMessage(…) from your views.