jquery验证插件.更改错误样式

Question

我有一个现有的表格,其中的字段非常接近.我想在一个小弹出窗口中获取错误消息,而不是在字段旁边的常规标签.

更确切地说,这是我想要的错误消息样式.

有关如何查找应用于错误消息的样式以及如何更改它们的任何线索？

提前致谢.

Answer 1

您想要实现的目标比简单地更改错误class或消息样式稍微复杂一些.

您必须集中精力处理errorPlacement和success回调函数.请参阅文档: jqueryvalidation.org/validate

或者,您可以安装另一个插件,为您创建这些工具提示.我使用Tooltipster,但是如何集成工具提示插件取决于其开发人员可用的方法.

首先,在将显示错误的所有特定元素上初始化Tooltipster插件(带有任何选项):form

$(document).ready(function () {

    // initialize tooltipster on form input elements
    $('#myform input[type="text"]').tooltipster({ 
        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
    });

});

二,使用Tooltipster的高级选项与一起success:并errorPlacement:内置到验证插件回调函数来自动显示和隐藏工具提示如下:

$(document).ready(function () {

    // initialize validate plugin on the form
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).tooltipster('update', $(error).text());
            $(element).tooltipster('show');
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        }
    });

});

工作演示:http: //jsfiddle.net/kyK4G/

来源: 如何在Tooltipster工具提示中显示来自jQuery Validate插件的消息？