Question

我有一个使用jQuery Validation插件的表单。表单字段位于一系列手风琴框中，表单错误消息显示在每个字段下方。这是好的，除非该字段是关闭的手风琴，然后无法知道手风琴包含错误。

有没有办法将错误类应用于手风琴的标题？我知道我可以使用像

这样的东西

$("#form").validate({
    rules: {
    ...
    },
    highlight: function(element) {
        $(element).closest(".title").addClass("error");
    },
    unhighlight: function(element) {
        $(element).closest(".title").removeClass("error");
    }
});

定位字段的容器，但在这种情况下，它不是父容器。

我的手风琴结构如下。我需要将错误类应用于包含产生错误的字段的相应“title”div。

<ul class="accordion">
    <li class="active">
        <div class="title panel1">
            Accordion Panel 1
        </div>
        <div class="content">
            ... form fields go here ...
        </div>
    </li>
    <li>
        <div class="title panel2">
            Accordion Panel 2
        </div>
        <div class="content">
            ... more form fields go here ...
        </div>
    </li>
    <li>
        <div class="title panel3">
            Accordion Panel 3
        </div>
        <div class="content">
            ... more form fields go here ...
        </div>
    </li>
</ul>

我也试过这个没有运气：

highlight: function(element) {
    $(element).closest(".title").addClass("error");
},
unhighlight: function(element) {
    $(element).closest(".title").removeClass("error");
}

有没有办法定位“标题”div？

Answer 1

此处title元素是.content父

的前一个兄弟

你可以使用

$(element).closest(".content").prev('.title').addClass("error");

或

$(element).closest("li").children('.title').addClass("error");

jQuery Validation插件 - 为其他元素添加错误类

1 个答案: