如何正确地将工具提示与jQuery Validate集成 [英] How to properly integrate tooltips with jQuery Validate

问题描述

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

I have the following code for displaying a validation error in a tooltip:

<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>

这很好但有一个问题：

是否有很容易一次只显示一个错误弹出窗口？

Is there an easy of only displaying one error popup at a time?

推荐答案

你不应该使用 showErrors 用于工具提示，因为此回调函数通常用于生成所有消息的列表，例如表单顶部的摘要。 获取错误的地图作为第一个参数，并将错误数组作为第二个参数。 使用 showErrors 是报告问题的主要原因。您希望错误一次，而不是一次性。

You should not use showErrors for tooltips because this callback function is typically used for generating a list of all messages, like for a summary at the top of the form. "Gets the map of errors as the first argument and an array of errors as the second." Using showErrors is the primary cause of your reported problem. You want the errors one a time, not all at once.

您确实解释了如何构建工具提示，但您需要集成工具提示使用jQuery的插件使用 errorPlacement 和 success 回调函数进行验证;这会将单个挂起错误消息放在单个工具提示中。此集成还取决于工具提示插件的可用选项...您是否可以动态更改工具提示中的文本？你能动态地/编程地显示/隐藏它们吗？

You did explain anything about how you're constructing the tooltips, but you'll need to integrate your tooltips plugin with jQuery Validate by using its errorPlacement and success callback functions; which will put the single pending error message inside a single tooltip. This integration also depends on the available options of your tooltips plugin... like can you dynamically change the text inside a tooltip? Can you dynamically/programmatically show/hide them, etc?

更像这样......

Something more like this...

$("#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
});

我我正在使用像这样的ToolTipster jQuery插件。

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

Demo using ToolTipster plugin: http://jsfiddle.net/2DUX2/3/

这篇关于如何正确地将工具提示与jQuery Validate集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！