Problème avec errorPlacement dans jQuery Validator

Question

J'ai une question à propos de la méthode errorPlacement dans jQuery Validator Plug-in: Je veux mettre un message d'erreur dans un div.

Avant de continuer ... Oui, le code est horrible, je travaille dans un projet qui n'est pas à moi, sans documentation ou quoi que ce soit que je m'aide. Mais je ne peux pas écrire à partir de zéro toute la page Web.

Ok, nous allons continuer, c'est une petite section du code HTML:

<tr> 
    <th height="24" scope="col"> 
    <div align="left" class="Style69 Style72 Style75"> 
     <span class="Style77">Name</span> 
    </div> 
    </th> 
    <th height="24" colspan="3" scope="col"> 
    <div align="left"> 
     <span class="Style69 Style72 Style75"> 
     <input id="txtname" name="txtname" class="required" 
     type="text" size="30" /> 
     </span> 
    </div> 
    </th> 
</tr> 
<tr> 
    <td height="17" colspan="4"> 
    <div id="errorMessage"></div> 
    </td> 
</tr> 

La mise en page est une table, et, à l'intérieur de ce tableau sont placés tous les éléments (boîtes de saisie et sélectionnez son).

Ma question est, comment puis-je placer le message d'erreur dans la div "errorMessage"?

que je fais quelque chose comme ceci:

errorPlacement: function(error, element) { 
    error.appendTo(element.prev().next().next()); 
} 

Mais cela ne fonctionne pas. Ensuite, j'ai essayé cela:

errorPlacement: function(error, element) { 
    error.appendTo(element.prev().next().next().find("#errorMessage")); 
} 

Et rien ne se passe. Les balises "Div" et "Span" font partie du DOM?

Une suggestion?

Answer 1

Le problème ici est que .prev() donne aucun résultat, il n'y a pas membre de la fratrie à votre <input> ici:

<span class="Style69 Style72 Style75"> 
    <input id="txtname" name="txtname" class="required" 
    type="text" size="30" /> 
    </span> 

Quelque chose comme cela devrait fonctionner:

errorPlacement: function(error, element) { 
    element.closest('tr').next().find('.errorMessage').append(error); 
} 

Il utilise .closest() pour aller jusqu'à le <tr>, obtient le .next() frère (le prochain <tr>) puis .find() pour obtenir l'élément class="errorMessage" à l'intérieur.

Avec cela, changez votre id à une classe, comme ceci:

<div class="errorMessage"></div>