javascript - 如何正确地将工具提示与 jQuery Validate 集成

Question

我有以下代码用于在工具提示中显示验证错误:

<form name="NATIPRangeForm">
    <div class="input-group">
        <strong class="ip-value-title">Base Address:</strong>
        <input class="ip-input" type="number" id="ip_seg_1" name="ip" ng-model="nat.ip.seg1" min="0" max="255" required>.
        <input class="ip-input" type="number" id="ip_seg_2" name="ip" ng-model="nat.ip.seg2" min="0" max="255" required>.
        <input class="ip-input" type="number" id="ip_seg_3" name="ip" ng-model="nat.ip.seg3" min="0" max="255" required>.
        <input class="ip-input" type="number" id="ip_seg_4" name="ip" ng-model="nat.ip.seg4" min="0" max="255" required>
    </div>
</form>

<script>
    $("#NATIPRangeForm").validate({

        rules: {
            ip: {
                required: true,
                min: 0,
                max: 255,
                number: true
            }
        },

        showErrors: function (errorMap, errorList) {
            $.each(this.successList, function (index, value) {
                return $(value).popover("hide");
            });
            return $.each(errorList, function (index, value) {
                var _popover;
                console.log(value.message);
                _popover = $(value.element).popover({
                    trigger: "manual",
                    placement: "bottom",
                    content: value.message,
                    template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
                });
                _popover.data("bs.popover").options.content = value.message;
                return $(value.element).popover("show");
            });
        }
    });

    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>

这很有效，但有一个问题:

有没有一种简单的方法可以一次只显示一个错误弹出窗口？

Answer 1

您不应该使用 showErrors 作为工具提示，因为此回调函数通常用于生成所有消息的列表，例如表单顶部的摘要。 "Gets the map of errors as the first argument and an array of errors as the second."使用 showErrors 是您报告的问题的主要原因。您希望一次出现一个错误，而不是一次出现所有错误。

您确实解释了有关如何构建工具提示的任何内容，但您需要使用其 errorPlacement 和 success 回调将工具提示插件与 jQuery Validate 集成功能;这会将单个待处理错误消息放入单个工具提示中。这种集成还取决于工具提示插件的可用选项...例如您可以动态更改工具提示内的文本吗？您可以动态/编程方式显示/隐藏它们等吗？

类似这样的东西......

$("#NATIPRangeForm").validate({
    rules: {
        ip: {
            required: true,
            min: 0,
            max: 255,
            number: true
        }
    },
    errorPlacement: function (error, element) {
        // put text of error into tooltip with $(error).text()
        // show tooltip
    },
    success: function (label, element) {
        // hide the tooltip
    },
    // any other options
});

I'm using the ToolTipster jQuery plugin like this .

使用 ToolTipster 插件的演示:http://jsfiddle.net/2DUX2/3/