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/
