jQuery验证插件和Tooltipster插件错误

Question

我正在尝试使用Tooltipster插件来自定义用户收到的错误消息，并遇到以下问题：

您在未初始化的元素上调用了Tooltipster的“content”方法

我的HTML代码：

<form>
  <input id="one" type="number" name="one" />
  <input id="two" type="number" name="two" />
  <button id="button" type="submit">Submit</button>
</form>

JavaScript：

$(document).ready(function () {

            $('form').validate({ // initialize the plugin
                rules: {
                    one: {
                        required: true,
                        min: 1,
                        max: 100
                    },
                    two: {
                        required: true,
                        min: 50,
                        max: 80
                    }
                },
                submitHandler: function (form) {
                    doTest();
                    return false;
                },
                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');
                }
            });

        });

什么可能是问题？

- kalpetros

Answer 1

控制台错误：

您在一个未初始化的元素上调用了Tooltipster的“content”方法

问题在于您没有正确初始化输入元素上的Tooltipster插件。

// initialize tooltipster on form input elements
$('form input').tooltipster({  // <-  USE THE PROPER SELECTOR FOR YOUR INPUTs
    trigger: 'custom', // default is 'hover' which is no good here
    onlyOne: false,    // allow multiple tips to be open at a time
    position: 'right'  // display the tips to the right of the element
});

请参见：https://dev59.com/JWUq5IYBdhLWcg3wKtNL#14741689。

- Sparky

---

@kalpetros，正如您所看到的，它可以无错误地工作。 - Sparky

@kalpetros，你必须确保正确地定位到你的输入元素。尝试将 $('form input[type="text"]').tooltipster(... 修改为 $('form input').tooltipster(...。 - Sparky

现在它可以工作了。我所做的是将 $('form input[type="text"]') 更改为 $('form input')。 - kalpetros

@kalpetros，是的，只要您选择与验证考虑的相同的输入元素，它就可以正常工作。 $('form input') 将选择所有表单元素内部的所有输入元素。 - Sparky