#Html.TextBoxFor textbox isn't highlighted after failing validation - asp.net-mvc-3

Question

I am using MVC3 with Razor. For input I have two types of control:
#Html.TextBoxFor
#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;
}

Answer 3

I faced same issue today:
In order to raise validation for textbox or any other field you just need these two lines:
In controller: ModelState.AddModelError("ErrorEmail", "Error Message");
In View: #Html.ValidationMessage("ErrorEmail")
And in web.config
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
It was overwriting validation css with my own website css so that's why it was not showing red border around textbox.
making validation error style important resolved my problem:
input.input-validation-error {
border: 1px solid #e80c4d !important;
}

Answer 4

Add both .input-validation-error and .input.input-validation-error classes.

Answer 5

I know this is old, but in case anyone else is searching this, ensure you also use
#Html.ValidationMessageFor(m => m.FirstName)
After your textbox

Answer 6

In order to have client-side validation, you need to ensure that you have the necessary scripts included in your View (whether it is through the _Layout.cshtml view or your direct view). Put this at the top of your view:
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
Ensure the path and the script names are correct. This will enable you to utilize client-side validation (i.e. highlighting the text box).