jQuery Validation plugin -- add error class to additional elements

Question

I have a form that uses the jQuery Validation plugin. The form fields are in a series of accordion boxes, and the form error messages are displayed beneath each field. This is fine unless the field is in an accordion that is closed, and then there is no way to know that the accordion contains an error.

Is there a way to apply an error class to the accordion's title? I know that I can use something like

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

to target the field's container, but in this case it isn't a parent.

My accordion structure is below. I need to apply the error class to the appropriate "title" div that contains the field producing the error.

<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>

I also tried this with no luck:

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

Is there a way to target the "title" divs?

Arun P Johny · Accepted Answer · 2013-09-20 15:45:17Z

2

Here the title element is the previous sibling of the .content parent

you can use

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

or

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

answered Sep 20, 2013 at 15:45

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

artmem Over a year ago

this worked: $(element).closest(".content").prev(".title").addClass("error"); but it now doesn't apply the error class to the form field itself (which was the previous default behavior). Is there a way to have it add the class to both the field itself and the closest .title div?

Arun P Johny Over a year ago

@artmem Try $(element).closest(".content").prev('.title').addBack().addClass("error");

artmem Over a year ago

that adds the error class to every element within the "content" div, not just field itself.

artmem Over a year ago

fixed it with this: $(element).closest(".content").prev('.title').addClass("error"); $(element).addClass("error");

Collectives™ on Stack Overflow

jQuery Validation plugin -- add error class to additional elements

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related