qtip2 扩展.net mvc 默认验证样式

先看下效果

个人觉得这样的化不会因为验证而撑坏原先的结构

下来看如何修改

.net mvc 框架的扩展验证都在 jquery.validate.unobtrusive 这个文件中在这个里面找到function onError(error, inputElement) 

 1  function onError(error, inputElement) {  // 'this' is the form element
 2         var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
 3             replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;
 4         container.removeClass("field-validation-valid").addClass("field-validation-error");
 5         error.data("unobtrusiveContainer", container);        
 6         var elem = $("#" + inputElement[0].name.replace(".", "_"));//添加提示消息
 7         if (replace) {
 8             container.empty();
 9             error.removeClass("input-validation-error").appendTo(container);
10             //添加提示消息
11             elem.filter(':not(.valid)').qtip({
12                 overwrite: false,
13                 content: error,
14                 position: {
15                     my: 'left center',
16                     at: 'right center',
17                     viewport: $(window)
18                 },
19                 show: {
20                     event: false,
21                     ready: true
22                 },
23                 hide: false,
24                 style: {
25                     classes: 'ui-tooltip-red'
26                 }
27             })
28             .qtip('option', 'content.text', error);
29         }
30         else {
31             error.hide();
32             // 删除提示
33             elem.qtip('destroy');
34         }
35     }

 1 function onSuccess(error) {  // 'this' is the form element
 2         var container = error.data("unobtrusiveContainer"),
 3             replace = $.parseJSON(container.attr("data-valmsg-replace")),
 4             elem = $("#" + container.attr("data-valmsg-for"));// 删除提示
 5         if (container) {
 6             container.addClass("field-validation-valid").removeClass("field-validation-error");
 7             error.removeData("unobtrusiveContainer");
 8             if (replace) {
 9                 // 删除提示
10                 elem.qtip('destroy');
11                 container.empty();
12             }
13         }
14     }

在页面引用qtip2 就行了

qtip的配置我就不说了附上地址 http://craigsworks.com/projects/qtip2/

转载于:https://www.cnblogs.com/binghe875/archive/2013/01/23/2872697.html