Plugin de validation jQuery: Comment appeler une fonction lors de la validation d'un champ

Question

Dans cette fonction, j'affiche une image d'erreur dans le prochain td de la table lorsqu'un champ n'est pas validé. Il affiche correctement les images d'erreur mais lorsqu'un champ est validé, son image d'erreur n'est pas supprimée du td suivant. J'ai essayé d'utiliser l'option "succès" mais cela ne fonctionne pas. Quelqu'un peut-il me dire le code exact.

$(obj).find("form").validate({ 

    showErrors: function(errorMap, errorList) { 
     for (key in errorMap) { 
       $('#' + key).parent().next().html("<img id='exclamation' src='images/exclamation.gif' />"); 
     } 
    } 

}); 

Answer 1

Après un certain temps, je suis ma réponse . En fait, je veux afficher une image avec une légende (contenant une erreur) dans la colonne suivante (td) du champ de saisie qui n'est pas validée par le plugin de validation. Et quand un champ d'entrée est validé, cette image d'erreur devrait être enlevée avec sa légende dessus.

Voici ma solution.

$("form").validate({ 

    errorPlacement: function(error, element) { 

     //There should be an error 
     if(error.html() != ''){   

      element.parent().next().html("<img id='exclamation' src='images/exclamation.gif' />").callout({ 
       width  : 200, 
       cornerRadius : 8, 
       className : "validationCallout", 
       content  : error, 
       align  : "left", 
       nudgeHorizontal : -14, 
       nudgeVertical : 4, 
       arrowHeight : 6 
      });  
     } 
    }, 

    success: function(label) { 
     $(obj).find(".valid").parent().next().html("");   //remove error image from next column(td) of input containing "valid" class 
     $(obj).find(".valid").parent().next().closeCallout(); //remove callout on error image from next column(td) of input containing "valid" class 
    } 

}); 

Ce code peut être complexe mais cela fonctionne pour moi maintenant. Un plugin d'appel est utilisé ici qui n'est pas lié à la question mais peut aider n'importe qui. Quelqu'un peut-il le rendre plus simple?

Answer 2

Créez une fonction qui supprime toutes les images d'erreur. Appelez-le au début des deux méthodes succès et showErrors.

Answer 3

Vous pouvez regarder l'option errorPlacement.

voir le Remember the milk demo

à partir de là:

errorPlacement: function(error, element) { 
    if (element.is(":radio")) 
     error.appendTo(element.parent().next().next()); 
    else if (element.is(":checkbox")) 
     error.appendTo (element.next()); 
    else 
     error.appendTo(element.parent().next()); 
} 

personnaliser il afin de placer votre message d'erreur au bon endroit (le td adjacent)