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

先看下效果

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

下来看如何修改

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

 function onError(error, inputElement) {  // 'this' is the form element
        var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
            replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;
        container.removeClass("field-validation-valid").addClass("field-validation-error");
        error.data("unobtrusiveContainer", container);        
        var elem = $("#" + inputElement[0].name.replace(".", "_"));//添加提示消息
        if (replace) {
            container.empty();
            error.removeClass("input-validation-error").appendTo(container);
            //添加提示消息
            elem.filter(':not(.valid)').qtip({
                overwrite: false,
                content: error,
                position: {
                    my: 'left center',
                    at: 'right center',
                    viewport: $(window)
                },
                show: {
                    event: false,
                    ready: true
                },
                hide: false,
                style: {
                    classes: 'ui-tooltip-red'
                }
            })
            .qtip('option', 'content.text', error);
        }
        else {
            error.hide();
            // 删除提示
            elem.qtip('destroy');
        }
    }

function onSuccess(error) {  // 'this' is the form element
        var container = error.data("unobtrusiveContainer"),
            replace = $.parseJSON(container.attr("data-valmsg-replace")),
            elem = $("#" + container.attr("data-valmsg-for"));// 删除提示
        if (container) {
            container.addClass("field-validation-valid").removeClass("field-validation-error");
            error.removeData("unobtrusiveContainer");
            if (replace) {
                // 删除提示
                elem.qtip('destroy');
                container.empty();
            }
        }
    }

在页面引用qtip2 就行了

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