ASP.net MVCvalidation突出显示和不正确的字段Jquery上的图标
我正在寻找一种方法来更改默认的ASP.net MVCvalidation，以便不是在每个不正确的表单字段旁边放置一条消息，而是放置一个图标。 然后我会在页面的其他位置列出错误。 图标将是一个图像，所以我需要在不正确的字段旁边呈现图像标记。 除了放置一个图标，我想在不正确的字段周围放一个红色边框。
总结当针对特定字段触发validation时，我想要放置在字段旁边的图像而不是文本消息，并且我希望字段将css样式更改为具有红色边框的字段。 有谁知道如何做到这一点？ 谢谢。
我正在使用带有剃刀视图的ASP.net MVC。 我有
@Html.ValidationSummary(true) model.fieldname) <-- next to each field 实际上，重新实现所有客户端validation的东西并不是最好的主意。 所以，我将向您展示一些简单的“黑客”方法。 这可能对你有所帮助。
默认validation在生成的错误文本容器跨度上放置.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给出的确切输出。
我猜两个“颜色：透明”和“背景大小”都需要CSS3。 我没有使用jQuery“剪掉”而无法隐藏文本。 虽然我读到“line-height：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时，我猜你可以做比工具提示更多的花哨的东西。
鉴于已接受的答案，如果您想保留原始错误消息，只需取出透明线并添加填充：
.field-validation-error { background-image: url('http://findicons.com/files/icons/1014/ivista/128/error.png'); background-repeat: no-repeat; background-size: 16px 16px; padding-left: 25px; }
如果您想使用材质图标而不是图形，可以使用以下css执行此操作：
span.field-validation-error:after { font-family: "Material Icons"; font-size: 20px; padding-left: 5px; content: "highlight_off"; }