2

我想在工具提示中显示我的 jQuery 验证消息。为了实现这一点，我首先将以下 CSS 规则添加到我的样式表中：

fieldset .field-validation-error {
    display: none;
}

fieldset .field-validation-error.tooltip-icon {
    background-image: url('/content/images/icons.png');
    background-position: -32px -192px;
    width: 16px;
    height: 16px;
    display: inline-block;
}

和一小段 JS 代码：

; (function ($) {
    $(function() {
        var fields = $("fieldset .field-validation-valid, fieldset .field-validation-error");
        fields.each(function() {
            var self = $(this);
            self.addClass("tooltip-icon");
            self.attr("rel", "tooltip");
            self.attr("title", self.text());
            self.text("");
            self.tooltip();
        });
    });
})(jQuery);

问题是我现在需要在验证消息更改时捕获任何事件，我一直在查看源代码jquery.validate.unobtrusive.js，而我需要挂钩的方法是function onError(error, inputElement)方法。

只要我有更新的title属性，我的工具提示插件就可以工作，问题出现在重新验证字段并重新生成验证消息时，我需要挂钩并防止消息被放在那里并将其放入title而是属性。

我想在不修改实际jquery.validate.unobtrusive.js文件的情况下找到一种方法。

第二点，如果禁用了javascript，我该如何改进这一点以保持功能不变？

4

1 回答 1

2

好的，我同意了，以防万一有人再次遇到这种情况：

; (function ($) {
    $(function() {
        function convertValidationMessagesToTooltips(form) {
            var fields = $("fieldset .field-validation-valid, fieldset .field-validation-error", form);
            fields.each(function() {
                var self = $(this);
                self.addClass("tooltip-icon");
                self.attr("rel", "tooltip");
                self.attr("title", self.text());
                var span = self.find("span");
                if (span.length) {
                    span.text("");
                } else {
                    self.text("");
                }
                self.tooltip();
            });
        }

        $("form").each(function() {
            var form = $(this);
            var settings = form.data("validator").settings;
            var old_error_placement = settings.errorPlacement;
            var new_error_placement = function() {
                old_error_placement.apply(settings, arguments);
                convertValidationMessagesToTooltips(form);
            };
            settings.errorPlacement = new_error_placement;
            convertValidationMessagesToTooltips(form); // initialize in case of model-drawn validation messages at page render time.
        });
    });
})(jQuery);

和风格：

fieldset .field-validation-error { /* noscript */
    display: block;
    margin-bottom: 20px;
}

fieldset .field-validation-error.tooltip-icon { /* javascript enabled */
    display: inline-block;
    margin-bottom: 0px;

    background-image: url('/content/images/icons.png');
    background-position: -32px -192px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

我将只包含我拥有的工具提示脚本，因为它是一种定制的（尽管我基于其他人的）。

; (function ($, window) {
    $.fn.tooltip = function (){
        var classes = {
            tooltip: "tooltip",
            top: "tooltip-top",
            left: "tooltip-left",
            right: "tooltip-right"
        };

        function init(self, tooltip) {
            if ($(window).width() < tooltip.outerWidth() * 1.5) {
                tooltip.css("max-width", $(window).width() / 2);
            } else {
                tooltip.css("max-width", 340);
            }

            var pos = {
                x: self.offset().left + (self.outerWidth() / 2) - (tooltip.outerWidth() / 2),
                y: self.offset().top - tooltip.outerHeight() - 20
            };

            if (pos.x < 0) {
                pos.x = self.offset().left + self.outerWidth() / 2 - 20;
                tooltip.addClass(classes.left);
            } else {
                tooltip.removeClass(classes.left);
            }

            if (pos.x + tooltip.outerWidth() > $(window).width()) {
                pos.x = self.offset().left - tooltip.outerWidth() + self.outerWidth() / 2 + 20;
                tooltip.addClass(classes.right);
            } else {
                tooltip.removeClass(classes.right);
            }

            if (pos.y < 0) {
                pos.y = self.offset().top + self.outerHeight();
                tooltip.addClass(classes.top);
            } else {
                tooltip.removeClass(classes.top);
            }

            tooltip.css({
                left: pos.x,
                top: pos.y
            }).animate({
                top: "+=10",
                opacity: 1
            }, 50);
        };

        function activate() {
            var self = $(this);
            var message = self.attr("title");
            var tooltip = $("<div class='{0}'></div>".format(classes.tooltip));

            if (!message) {
                return;
            }
            self.removeAttr("title");
            tooltip.css("opacity", 0).html(message).appendTo("body");

            var reload = function() { // respec tooltip's size and position.
                init(self, tooltip);
            };
            reload();
            $(window).resize(reload);

            var remove = function () {
                tooltip.animate({
                    top: "-=10",
                    opacity: 0
                }, 50, function() {
                    $(this).remove();
                });

                self.attr("title", message);
            };

            self.bind("mouseleave", remove);
            tooltip.bind("click", remove);
        };

        return this.each(function () {
            var self = $(this);
            self.bind("mouseenter", activate);
        });
    };

    $.tooltip = function() {
        return $("[rel~=tooltip]").tooltip();
    };
})(jQuery, window);
于 2012-06-23T16:29:25.657 回答