jQuery Validation Plugin ErrorPlacement inside two different elements

Question

I'm trying to place separate error messages in separate elements when validating a large form. The form is divided into jQueryUI tabs, then accordions.

When there is an error in an element of a tab, I want to append a red exclamation point to the name of the tab, and if the error is in an accordion element, I also want to append the red exclamation point to the name of the accordion element.

Subsequently, when the errors are corrected, I would like those red ! to be removed (exactly as the error message beneath the invalid field is removed.

So:

Tab1 Tab2 Accordion1 Accordion2 Tab3

If the elements in accordion 2 have an error, I want to append a red ! to accordion2 and tab2:

Tab1 Tab2! Accordion1 Accordion2! Tab3

Then remove when the elements successfully validate. I've been trying forever, but I can't figure out how to conditionally change the errorElement (a label won't work for the tab and accordion, but is perfect for the actual element)...

Hopefully this makes sense, and thanks for any input you can provide.

Answer 1

You should try using the errorcontainer option

$("#myform").validate({
   errorContainer: "#Accordion2"
})

---

Edited

$("#myform").validate({
   showErrors: function(errorMap, errorList) {
       //error define where the errors in the ErrorList Go
       //you could also try
       this.errorContainer = "element1id, element2id"
   }
})

---

Edited2

Note: I am not testing this code. just providing you ideas.

$("#myform").validate({
   errorPlacement: function(error, element) {
        error.appendTo( element.closest('.tab'));

   }
})