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

Posted 2023-05-09

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

【英文标题】：ASP.net MVC validation highlight and icon on incorrect fields Jquery

【发布时间】：2011-11-20 05:15:46

【问题描述】：

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

【问题讨论】：

你在说什么 MVC，ASP.net MVC 框架或任何其他框架。了解背景故事会有所帮助...否则我会简单地说使用 jquery.validation 但那是它自己的验证。与您的 MVC 框架没有任何关系。

抱歉完全看错了。我说的是使用 Razor 视图的 ASP.net MVC。例如@Html.ValidationMessageFor(model => model.StationID) 每个字段旁边。

【参考方案1】：

实际上，重新实现所有客户端验证的东西并不是最好的主意。因此，我将向您展示一些简单的“hack”方法。这可能会对您有所帮助。

默认验证将.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;

这会使 span 文本内容消失，而是将 background-image 放在那里。这为您需要的视觉行为提供了非常接近的视觉行为。

这是上面css给出的确切输出。

【讨论】：

有没有办法做到这一点并保留错误消息。那么有一个图标和一个包含错误文本的工具提示吗？

【参考方案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 时，我猜你可以做比工具提示更多花哨的东西。

【参考方案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;

【参考方案4】：

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

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

【参考方案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;

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