jquery.validate errors in specific spans

Question

I try to control the jquery.validate errors. I want to show them in a "span" i created for each one of them

not sure why, but my JS not working

this is my html code

  <li>
      <label for="name">name</label>
      <span  class="errmsg" for="name"></span> 
      <input type="text" name="name"   />
    </li>
  <li>
      <label for="age">age</label>
      <span  class="errmsg" for="age"></span> 
      <input type="text" name="age"   />
    </li>

this is my JS code

...
success: function(label) {
       label.html(" ").addClass("checked");
    },

        wrapper: "div",  // a wrapper around the error message 

        errorPlacement: function(error, element) { 
                element.parent().next('.errmsg').html(error); 
       } 
});

Answer 1

The <span> is not in the right place for your traversing (in relation to the <input>, it's immediately before the element, so instead of this:

element.parent().next('.errmsg')

Which looks for the next <li> with a class of errmsg, you need this:

element.closest('li').find('.errmsg')
//or just:
element.prev('.errmsg')
//or 20 other ways...

The .closest('li') is the most flexible for changes later, the .prev('.errmsg') is the fastest.