Nested erroElement in Jquery Validator Plugin.

Question

I am using jQuery Validator plug-in for validating my form. Everything is working fine for me in this.

I am using errorElement : "dd". However, because of the UI requirement I have to insert an additional SPAN inside the "dd". Also, I have to highlight the label of the error field.

Can anyone suggest how can I achieve this?

HTML -

<div class="wrapper">
    <form name="member-login-form" action="#">
     <fieldset class="member-login-form">
      <dl>
       <dt>
        <label>*User Name</label>
       </dt>
       <dd class="login-form-login-username">
        <input type="text" name="username" id="username" />
       </dd>
       <dt>
        <label>*Password</label>
       </dt>
       <dd>
        <input type="password" name="password" id="password" />
       </dd>
      </dl>
      <button><span>Submit</span></button>
     </fieldset>
    </form>
</div>

JS -

$("div.wrapper").find('form').validate({

    errorPlacement: function(error, element) {
     error.insertBefore( element.parent('dd').prev('dt') );
    },
    errorElement: "dd",
    errorClass: 'has-errors',

    // Rules
    rules: {
     // first-name
     'username': {
      required: true,
      minlength: 6
     },
     'password': {
      required: true,
      minlength: 6
     }
    }

});

thanks in advance,
Ajay