.net – MVC3验证：无效时更改元素类

我正在使用服务器验证,并希望在无效时更改元素类.
例如,我有一个带验证消息的文本框：

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

当文本框数据无效时,我希望文本框获得红色边框.
我尝试使用css选择器更改它：

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

因此,当验证消息显示时,文本框将获得“aftererror”类.
不幸的是,即使数据有效,验证元素也会显示,只有没有文本.

那么如何在出错时更改texBox的css类,或者在没有错误时让验证元素消失.

解决方法

这已经内置在ASP.NET MVC中.

阅读Scott Gu’s blog post on MVC Validation阅读.

基本上,框架设置为自动将输入验证错误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添加到您的页面.它有助于所有验证的好处