Red border around TextBox when validation fails

Question

I am using ASP.NET MVC 2.

Html.DropDownListFor and Html.TextAreaFor automatically get red borders when the validation fails.

How to make the four borders of a TextBox (using Html.TextBoxFor) red when it fails validation?

For example, I have a TextBox that is required and when the user submits the form without specifying a value in the textbox, I want the textbox to have red borders.

Answer 1

When validation fails for a model property - it'll add a class to the input in the html. Have a look at the rendered html when the validation fails (using view source or firebug) and check out the class for your input*. Then edit your css to include a style for the failed validation.

E.g. In my project I have:

input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error
{
    background: #FEF1EC;
    border: 1px solid #CD0A0A;
}

HTHs,
Charles

* I'm pretty sure ASP.NET MVC add the class input-validation-error by default.

Answer 2

All you need to do is the CSS below:

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