MVC3 Validation: Change element class when invalid

I'm using server validation and want to change the element class when invalid. So for example I have a textbox with a validationmessage:

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

When the textbox data is invalid I want the textbox to get a red border. I tried to change it using css selectors:

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

so when the validationmessage is showing, the textbox would get the "aftererror" class. Unfortunately the validation element is also showing even if the data is valid, only there is no text.

So how would I change the css class of the texbox on erro开发者_JAVA技巧r, or have the validation element disappear when there's no error.

---

This is already built into ASP.NET MVC.

Take a read through Scott Gu's blog post on MVC Validation.

Basically the framework is setup to automagically add a input-validation-error css class to invalid fields.

Here's the CSS I use to add the red border and pinkish background (it's DotLess so not exactly what the CSS will look like)

.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;
}

_{just make sure you also have the jquery.validate.unobtrusive.js added to your page. It helps with all the validation goodness}

---

In MVC4 it is:

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

---

The .field-validation classes will apply to properties, but are likely being overridden, probably by

input[type="text"] 

Set the styles of .input-validation-error (NOT .field-validation-error) to !important or get rid of input[type="text"] from the stylesheet.