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

Question

我正在使用 jquery validate 和 tooltipster 来将错误消息显示为工具提示而不是默认值。我遇到的问题是多个复选框的错误消息位置。我想显示在主标签上（在这种情况下是位置），而不是显示在第一个复选框上。下面是示例代码，

形式：

<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

我遇到的问题是多个复选框的错误消息位置。

您正在input一次为所有元素配置/初始化 ToolTipster...

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

相反，为每个input元素配置/初始化 ToolTipster 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
});

请参阅此处的示例。