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

Question

我正在寻找一种方法来更改默认的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

Answer 1

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

默认验证将.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给出的确切输出.

Answer 2

我猜“颜色：透明”和“背景大小”都需要 CSS3。如果不使用 jQuery 来“剪掉它”，我就无法隐藏文本。虽然我读到“行高：0”也可能有效。无论如何，使用 jQuery，您也可以将文本移动到工具提示。这是我的 CSS：

.field-validation-error
{
    background-image: url('/Content/error.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

这是我的 jQuery 代码：

$(document).ready(function () {   
     $('.field-validation-error').each(function () {
         $(this).attr('title', $(this).html());
         $(this).html("")
     });
});

我猜当你第一次使用 jQuery 时，你可以做比工具提示更多的花哨的东西。