How to properly integrate tooltips with jQuery Validate

Question

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>

This works great but there is one issue:

image of overlapping dialogs

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

What plugin are you using for constructing the tooltips? – Sparky Jan 30 '15 at 18:14 — Sparky, Jan 30 '15 at 18:14

score 2 · Answer 1 · edited May 23 '17 at 12:32

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.

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
});

I'm using the ToolTipster jQuery plugin like this.

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

How to properly integrate tooltips with jQuery Validate

1 Answers1

Linked