@Html.TextBoxFor textbox isn't highlighted after failing validation

Question

I am using MVC3 with Razor. For input I have two types of control:

1. @Html.TextBoxFor
2. @Html.TextAreaFor

Both have required field validation. @Html.TextAreaFor highlight the box if validation fails where as @Html.TextBoxFor does not.

Here is my code

HTML:

@Html.TextBoxFor(m => m.FirstName)

Model:

[Required(ErrorMessage = "First Name is required")]
public string FirstName { get; set; }

Why is the textbox created using @Html.TextBoxFor not hightlighted when its validation fails?

Answer 1

Make sure the variables you're assigning to these input fields are [Required] in your model class.. Also did you strip out any css in a "clean up" process? Try adding this if it's not in there.

.field-validation-error
{
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

I had this problem myself. I added a new CSS class to the Site.css file (or whatever style sheet you prefer).

textarea.input-validation-error {
border: 1px solid #e80c4d;
}