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

Question

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

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

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

提前致谢。

Answer 1

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

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

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

---

首先，在显示错误的所有特定form元素上初始化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?

Answer 2

主要归结为CSS。将每个字段包装到一个相对定位的容器中：

<div class="fieldContainer">
    <label for="phone">Phone Number:</label>
    <input type="text" name="phone" />
</div>
<div class="fieldContainer">
    <label for="phone2">Phone Number:</label>
    <input type="text" name="phone2" />
</div>

.fieldContainer {
    position: relative;
    margin-bottom: 20px;
}

然后，您可以绝对定位错误标签并应用您喜欢的任何其他样式。

label.error {
    position: absolute;
    right: 143px;
    top: -25px;
    border: solid 1px #000;
    background: #fff;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .7);
    padding: 2px 5px;
}

这是一个例子： http://jsfiddle.net/wrxsti85/yD3c3/

希望这有帮助!!!

编辑：这些字段仅设置为数字，因此只需将文本放入字段即可触发错误。

Answer 3

可以从这个答案开始jQuery form validation - CSS of error label

jquery验证参考文档说

  

错误消息通过带有附加类的标签元素处理（选项errorClass）。

这意味着如果您按照上一个答案中的信息进行操作，则可以在带有class errorClass的div中添加错误。

然后使用css设置适当的样式。

作为助手，你应该熟悉chrome和/或firefox的浏览器开发工具。这些可以帮助您找到页面上元素的对象和样式，并帮助您调试javascript。