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.

John Hartsock · Accepted Answer · 2010-06-02 15:08:42Z

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'));

   }
})

edited Jun 2, 2010 at 15:08

answered Jun 2, 2010 at 14:38

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

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

11 Comments

Andy Poquette Over a year ago

Reading comprehension for the win. Ok. I'm testing now.

Andy Poquette Over a year ago

So, this doesn't quite work, because I need it to dynamically determine which top level element the errors are in and add the ! to that element. This will add the errors to each element even if there aren't errors in THAT element.

John Hartsock Over a year ago

ok well specify the errorcontainer when you showErrors. See Edited

John Hartsock Over a year ago

actually using the errorplacement option would probably be better

Andy Poquette Over a year ago

Is there a way to count the number of errors contained in a certain element? For instance if I have nested <div>s and there are errors two levels down, can I just get the total number of errors from the top level <div>? The error placement function works, but only 1/2 way because I need the error to also remain in a label form in the element(which I'm currently using the errorPlacement function for) Also, thank you for all of your suggestions and help.

|

Collectives™ on Stack Overflow

jQuery Validation Plugin ErrorPlacement inside two different elements

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related