jQuery.validate errorPosition not working correctly.

Question

Hello all, jQuery.validate errorPosition code:

errorPlacement: 
     function(error, element)
     {
          error.appendTo(element.siblings("label"));  
     },

That code works brilliantly when there is only one element below it's label.

Does NOT work:

<label for="location">Location:</label><br />
<div id="location"></div><br />
<input name="location" id="h_location" hidden /><br />

This works:

<label for="location">Location:</label><br />
<input name="location" id="h_location" hidden /><br />

When the div location is not there the error shows next to the location label. When the location div is there the error message does not show at all.

I've been asking around for help and someone mentioned to me that I should read up on CSS block level elements. I read up on them and I'm not finding a solution. All I gathered from that reading is, how to display either: inline, block or none. I'm apparently not understanding what that person is hinting towards.

Why is the error message not showing when it should and how do I get it to show?

-Thank You, Rich

Answer 1

I found a way to attach the error message to the label:

var elementName = element.attr("name");

error.appendTo($("label[for=" + elementName + "]"));

That works as expected.

I'm still open for other ways to accomplish this.

-Thank You, Rich