Question

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

@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类，或者在没有错误时让验证元素消失。

Answer 1

这已内置于ASP.NET MVC中。

阅读Scott Gu's blog post on MVC Validation。

基本上，框架设置为自动将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

.field-validation类将应用于属性，但很可能被覆盖，可能是

input[type="text"]

将.input-validation-error（NOT .field-validation-error）的样式设置为！important或从样式表中删除输入[type =“text”]。

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

3 个答案: