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

发布时间：2020-12-16 03:41:18 所属栏目：asp.Net 来源：网络整理

导读：我正在使用服务器验证,并希望在无效时更改元素类. 例如,我有一个带验证消息的文本框： @Html.ValidationMessageFor(m = m.FirstName,new {@class = "error"})@Html.TextBoxFor(m = m.FirstName,new {@class = "aftererror"}) 当文本框数据无效时,我希望文本

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

@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添加到您的页面.它有助于所有验证的好处

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!