jquery 验证多个复选框的工具提示错误消息放置问题

Question

我正在使用 jquery 通过工具提示器验证以将错误消息显示为工具提示而不是默认提示。我遇到的问题是多个复选框的错误消息放置。我想显示在主标签上（在本例中是 Location）而不是显示在第一个复选框上。下面是示例代码，

表格：

<form id="myform">
    <label for="location">Location</label>
    <br/>
    <label for="telf_local">In state</label>
    <input type="checkbox" id="telf" name="telf" value="1" />
    <label for="telf_movil">Out of state</label>
    <input type="checkbox" id="telf" name="telf" value="2" />
    <br/>
    <input type="submit" />
</form>

JS:

$(document).ready(function () {

    // initialize tooltipster on text input elements
    $('#myform :input').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });

    // initialize validate plugin on the form
    $('#myform').validate({
        errorPlacement: function (error, element) {

            var lastError = $(element).data('lastError'),
                newError = $(error).text();

            $(element).data('lastError', newError);

            if (newError !== '' && newError !== lastError) {
                $(element).tooltipster('content', newError);
                $(element).tooltipster('show');
            }

        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        },
        rules: {
            telf: {
                required: true
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form');
            return false;
        }
    });

});

Answer 1

The issue I'm having is the error message placement for multiple checkboxes.

您是 configuring/initializing 所有 input 元素的工具提示...

$('#myform :input').tooltipster({
    trigger: 'custom',
    onlyOne: false,
    position: 'right'  // <- same position for everything
});

相反，configure/initialize 每个 input 元素的工具提示 type。然后您可以为复选框工具提示设置自定义放置选项。

// text inputs
$('#myform input[type="text"]').tooltipster({
    trigger: 'custom',
    onlyOne: false,
    position: 'right'
});

// checkbox inputs
$('#myform input[type="checkbox"]').tooltipster({
    trigger: 'custom',
    onlyOne: false,
    // your custom positioning options here
});

查看示例 here。

jquery 验证多个复选框的工具提示错误消息放置问题

jquery validation with tooltipster error message placement issue for multiple checkbox

jquery

jquery-validate

tooltipster