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“剪掉”而无法隐藏文本。虽然我读到“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时可以做很多花哨的东西而不是工具提示。

Answer 3

鉴于已接受的答案，如果您想保留原始错误消息，只需取出透明线并添加填充：

.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;
}

Answer 4

如果您想使用材质图标而不是图形，可以使用以下css执行此操作：

span.field-validation-error:after {
    font-family: "Material Icons"; 
    font-size: 20px;
    padding-left: 5px;
    content: "highlight_off";
}

Answer 5

尝试一下。我使用.input-validation-error和。input-validation-error:focus：

.input-validation-error, .input-validation-error:focus {
    background-image: url('http://findicons.com/files/icons/1014/ivista/128/error.png');
    background-repeat: no-repeat;
    background-position-x:right;
    border:1px solid #ff0000 ;
    box-shadow: inset 0px 0px 3px #ff0000;
    color: Transparent;
    background-size: 16px 16px;
}

这会将图标应用于输入控件，并在保留验证消息的同时添加一个插入的红色边框和阴影。这是我得到的结果：