JQuery 验证插件消息样式

Question

我正在为 Jquery Validation plugin 的错误消息设置样式我遇到了一些困难。

我已经编辑了插件代码以更改消息的语言。我知道这可以用 javascript 来完成，但最好是“硬编码”。不过，这在实际示例中是看不到的。

这是 live example . 我需要插入 <span></span>以某种方式在错误消息之前，但我不知道该怎么做。有什么想法吗？

需要明确的是:插件不应显示带有“错误”类的元素，它应该像这样显示:

<span class='pointer'></span><label class='error'>This is the error</label>

Answer 1

我认为您最好的选择是错误元素的包装器和一些 CSS 样式:

$('#myform').validate({
    errorPlacement: function(label, element) {
        label.addClass('arrow');
        label.insertAfter(element);
    },
    wrapper: 'span'
});

这会给你这样的错误:

<span class='arrow'>
    <label class='error'>Error</label>
</span>

使用一些 CSS 即可完成。

span.arrow {
    margin-left: 6px;
    height:17px;
    background: url('http://i45.tinypic.com/f9ifz6.png') no-repeat left center;
}
label.error {
    height:17px;
    border-top:1px solid #99182c;
    border-right:1px solid #99182c;
    border-bottom:1px solid #99182c;
    margin-left:9px;
    padding:1px 5px 0px 5px;
    font-size:small;
}

live demo