如何正确地将工具提示与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/