1

我在让我的JQuery 验证达到我想要的地方时遇到了一些麻烦。我的错误显示在带有箭头的边栏中。这可以通过单个“包装器”来实现。

$('#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>
4

2 回答 2

4

您可以使用

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

演示：小提琴

于 2013-02-23T12:02:08.660 回答
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/

于 2013-02-23T16:37:51.283 回答