ASP.net MVC验证突出显示和不正确的字段Jquery上的图标

我正在寻找一种方法来更改默认的ASP.net MVC验证,以便不是在每个不正确的表单字段旁边放置一条消息,而是放置一个图标.然后我会在页面的其他位置列出错误.图标将是一个图像,所以我需要在不正确的字段旁边呈现图像标记.除了放置一个图标,我想在不正确的字段周围放一个红色边框.

总结当针对特定字段触发验证时,我想要放置在字段旁边的图像而不是文本消息,并且我希望字段将css样式更改为具有红色边框的字段.有谁知道如何做到这一点？谢谢.

我正在使用带有剃刀视图的ASP.net MVC.我有

@Html.ValidationSummary(true) <-- At the top of the form 
@Html.ValidationMessageFor(model => model.fieldname) <-- next to each field

解决方法

实际上,重新实现所有客户端验证的东西并不是最好的主意.所以,我将向您展示一些简单的“黑客”方法.这可能对你有所帮助.

默认验证在生成的错误文本容器跨度上放置.field-validation-error类.那么,让我们的风格满足我们的需求

.field-validation-error
{
    background-image: url('http://findicons.com/files/icons/1014/ivista/128/error.png');
    background-repeat: no-repeat;
    color: Transparent;
    background-size: 16px 16px;
}

这使得跨度文本内容消失,而是将背景图像放在那里.这为您需要的人提供了非常接近的视觉行为.

这是从上面的css给出的确切输出.