ASP.net MVC验证亮点和图标不正确的领域的Jquery [英] ASP.net MVC validation highlight and icon on incorrect fields Jquery

问题描述

我正在寻找一种方法来改变默认的ASP.net MVC的验证，这样，而不是把一个消息旁边的每个不正确的表单字段将代替把一个图标。然后，我将列出错误，其他地方在页面上。该图标会变成一个图像，所以我就需要渲染下一个不正确的领域图像标签。以及把一个图标我想放一个红色的边框不正确的领域。

要总结的时候验证是针对特定领域triggerd我想放在旁边的领域，而不是文本消息的图像，我想现场有css样式更改一个具有红色边框。有谁知道如何做到这一点？谢谢你。

我使用ASP.net MVC剃刀意见。我有

  @ Html.ValidationSummary（真）＆LT;  - 在表单的顶部
@ Html.ValidationMessageFor（型号=＆GT; model.fieldname）LT;  - 每个字段旁边
 

解决方案

其实，重新实现所有的客户端验证的东西是不是最好的主意。于是，我将告诉你一些简单的黑客的做法。这可能会帮助你。

对生成的错误文本容器跨度

默认验证地方点域验证错误类。所以，让我们的风格，跨越了我们的需求。

 点域验证错误
{
    背景图像：网址（'http://findicons.com/files/icons/1014/ivista/128/error.png'）;
    背景重复：不重复;
    颜色：透明;
    背景-SIZE：16px的16px的;
}
 

这使得跨度文本内容dissapear，而是放置背景图片在那里。这给了pretty接近视觉行为一个你需要的。

这是从上面的CSS给出的精确输出。

I'm looking for a way to change the default ASP.net MVC validation so that instead of putting a message next to each incorrect form field it would instead put an icon. I would then list the errors somewhere else on the page. The icon will be an image so i'd need to render the image tag next to incorrect fields. As well as putting an icon i'd like to put a red border around the incorrect fields.

To summarise when the validation is triggerd against a particular field i'd like an image placed next to the field instead of the text message and i'd like the field to have a change of css style to one with a red border. Does anyone know how to do this? Thanks.

I'm using ASP.net MVC with razor views. I have

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

解决方案

Actually, reimplementing all the client-validation stuff would be not the best idea. So, I will show you some simple "hack" approach. This may help you.

Default validation places .field-validation-error class on the generated error-text-container spans. So, let's style that span to our needs

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

This makes span text contents dissapear and instead places background-image in there. This gives pretty close visual behavior to one you need.

This is the exact output given from above css.

这篇关于ASP.net MVC验证亮点和图标不正确的领域的Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！