jquery - 剑道 ui 工具提示位置

Question

我正在使用剑道 ui 进行网页设计，目前我被困在验证工具提示的位置上。奇怪的是，对于任何下拉菜单，它都出现在我希望它出现的位置，即在输入下方，但对于纯文本输入，验证工具提示出现在输入元素旁边。这使我的页面看起来不一致。我已经在剑道文档中搜索了工具提示，但它没有我希望的那么详细，也没有提供太多帮助。

任何想法如何确保我的验证工具提示，无论它应用的元素类型如何，都出现在正在验证的字段下方？

有关更多说明，请参阅屏幕截图：

提前致谢。

Answer 1

我找到的最佳解决方案是覆盖 CSS .k-tooltip-validation 并将其放置在您想要的任何位置，如下例所示：

.k-tooltip-validation {
        margin-top: -40px !important; 
}

希望能帮助到你！:)

Answer 2

这实际上取决于页面的标记和样式。添加display: block到输入字段可能会解决问题，或者如果您使用floats，则将 aclear:left和必要的添加margin到验证消息中。

Answer 3

你可以试试这样的。

我遇到了很多麻烦，因为我可以向 validate 事件添加一个回调处理程序，但它不是只在帖子上调用模糊事件，我希望内联实时显示在顶部的摘要中。

首先禁用 validateOnBlur 以便不会弹出默认内容。

 var validatable = $("form").kendoValidator( { 
    validateOnBlur:false,
    ...
    });

接下来，您可以添加自己的验证回调。

正如我所指出的，这不会被称为模糊。

        validateOnBlur:false,
        validate: function (e) {
          ....
        },

调用 validate on blur 使字段更新为蓝色。

由于我们禁用了此功能，因此请确保它在表单发布和模糊中都被调用。

    $("#input, textarea").on("blur", function (validator) {
        validator.validatable.validate();
    }.bind(null,this));

      // valid on submit where you like
    submit: function () {
        if (this.validatable.validate()) {
            $("#form1").submit();
        }
    },

总结很容易做到。我将它们放在页面顶部的带有类错误部分的控件中

我复制错误并将它们放在页面上的其他地方的摘要中。我还使用一些 jquery 在标签前放了一个小星星。请注意next()是具有错误文本的跨度。

        validate: function (e) {
            $(".k-invalid").next().each(function () {
                $(".errors-section").append($(this).text()).show();
                $(this).text("");
            });
        },

这对我有用。