Question

我在将JQuery Validation升级到我想要的地方时遇到了一些麻烦。我的错误显示在带箭头的侧边框中。这可以通过一个“包装器”来实现。

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

问题是，不幸的是我的输入字段周围有一个框，因此错误应放在该框的边框上。要做到这一点，我需要两个包装器。所以我的错误应该是这样的：

<span class='errorContainer'>
    <span class='arrow'>
        <span class='error'>This is the actual error message.</span>
    </span>
</span>

目前的代码只给我这个：

<span class='arrow'>
    <span class='error'>This is the actual error message.</span>
</span>

Answer 1

您可以使用

errorPlacement: function(label, element) {
    $('<span class="errorContainer"><span class="arrow"></span></span>').insertAfter(element).find('.arrow').append(label)
}

演示：Fiddle

Answer 2

接受的答案没有错，但我想展示一种更有效的方法来实现相同的所需DOM结构。

而不是插入一个空容器，找到内部元素，然后附加错误......以下内容不那么冗长，更直接;它只是用所需的容器包装标签。

errorPlacement: function (error, element) {
    error.insertAfter(element)
    .wrap('<span class="errorContainer"><span class="arrow"></span></span>');
},

这样做的好处是可以使用插件的默认 errorPlacement回调...

error.insertAfter(element)

...然后将jQuery .wrap()方法链接到最后......

.wrap('<span class="errorContainer"><span class="arrow"></span></span>')

工作演示：http://jsfiddle.net/2ZaLB/

jQuery Validate插件 - 在错误标签周围获取两个包装器

2 个答案: