Errorplacement issue

Errorplacement issue

Hi folks,

I'm trying to override the default placement of the error while using the jquery validation plug-in. I have a very simple form without any <td>'s:

  1. <form action="/contact" method="post" accept-charset="UTF-8" id="contactform">
  2.     <fieldset>
  3.            <input class="hidden" type="hidden" name="check" id="check" />
  4.         <p><span></span><label for="name" class="inside">Voornaam &amp; naam</label><input type="text" name="name" id="name" title="Naam" value="<?php echo $name; ?>" tabindex="1" /></p>
  5.         <p><span></span><label for="email" class="inside">E-mailadres</label><input type="text" name="email" id="email" title="E-mail" value="<?php echo $email; ?>" tabindex="2" /></p>
  6.         <p><span></span><label for="message" class="inside">Bericht</label><textarea cols="30" rows="20" name="message" id="message" title="Bericht"  tabindex="3"><?php echo $message; ?></textarea></p>
  7.         <p><button type="submit" name="submit" id="submit" title="Verstuur">Verstuur</button></p>
  8.     </fieldset>
  9. </form>
Here you can see it in action: http://beta.bellewaerdefun.be/contact. As you can see, I've put an empty <span> before my <label class="inside"> element. That <span> element is the element where I realy want to place my error in. I've tried to do it this way:

  1. $('#contactform').validate({
  2.     errorPlacement: function(error, element){error.appendTo(element.parent('p').next('span'));},
  3.     rules:        {    name:        {required: true},
  4.                     email:        {required: true, email: true},
  5.                     message:    {required: true, minlength: 0}
  6.                 },
  7.     messages:    {    name:        '&uarr; Gelieve uw voornaam en naam in te vullen',
  8.                     email:        '&uarr; Gelieve een correct e-mailadres in te vullen',                       
  9.                     message:    '&uarr; Gelieve uw bericht in te vullen'
  10.                 }
  11. });
But as you could guess, this won't work: the <span> stays empty after I validate the form without any input in the form. What am I doing wrong? Anyone who can help me? Thanks!