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

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

已关闭 9 年前。

• 要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果。另请参阅:Stack Overflow question checklist
• 有关您编写的代码问题的问题必须在问题本身中描述具体问题 - 并包含有效代码以重现该问题。请参阅SSCCE.org寻求指导。

Improve this question

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

更准确地说，这是我想要的错误消息的样式。

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

提前致谢。

Answer 1

What you want to achieve比简单地更改错误类或消息样式稍微复杂一些。

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

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

<小时/>

首先，在将显示错误的所有特定表单元素上初始化 Tooltipster 插件 ( with any options ):

$(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's advanced options以及success: and errorPlacement: callback functions built into the Validate plugin自动显示和隐藏工具提示，如下所示:

$(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/

<小时/>

来源:How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?