MVC3 check: change element class if invalid

Question

I am using server validation and want to change the class of an element when it is not valid. So, for example, I have a text field with a validationmessage value:

@Html.ValidationMessageFor(m => m.FirstName, new {@class = "error"})
@Html.TextBoxFor(m => m.FirstName, new {@class = "aftererror"})

If the text box data is invalid, I want the text box to get a red border. I tried changing it using css selectors:

 .error + .aftererror
    {   
        border:solid 1px red;
        }

therefore, when validationmessage is displayed, the text field will receive the aftererror class. Unfortunately, the check item is also displayed, even if the data is valid, only the text is missing.

So, how would I change the texbox css class on error or the validation element will disappear when there is no error.

Answer 1

ASP.NET MVC.

MVC.

input-validation-error css .

CSS, , ( DotLess, , CSS)

.field-validation-error
{
    color: @valid-dark;
}

.field-validation-valid
{
    display: none;
}

input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error
{
    border: 1px solid @valid-dark ;
    background-color: @valid-light;
    font-size:100%;
}

.validation-summary-errors
{
    font-weight: bold;
    color: @valid-dark;
    ul{
        display: none;
    }
}

.validation-summary-valid
{
    display: none;
}

_{, jquery.validate.unobtrusive.js .}

Answer 2

MVC4 :

.input-validation-error
{
     border: 1px solid red !important;
}

Answer 3

, , , , ,

input[type="text"] 

.input-validation-error (NOT.field-validation-error) [type = "text" ] .