JQuery Validation Plugin: Afficher mes propres erreurs avec les images dans l'option "errorPlacement"

Question

J'utilise le plugin de validation de jquery. J'utilise la fonction suivante pour afficher les messages d'erreur par défaut dans le prochain td (colonne) de l'élément de la table.

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


    errorElement: "div", 
      wrapper: "div", 

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

}); 

Cette fonction affiche les messages par défaut, mais je souhaite afficher mes propres messages d'erreur.

Par exemple, je veux ceci:

<img id='error' src='images/crosssign.gif' />")Please fill this field. 

au lieu de:

"This field is required." 

Merci à l'avance.

Answer 1

Après un certain temps, j'ai eu 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

Vous pouvez créer des messages pour les champs que vous validez. De l'jquery site:

$(".selector").validate({ 
    rules: { 
    name: "required", 
    email: { 
     required: true, 
     email: true 
    } 
    }, 
    messages: { 
    name: "Please specify your name", 
    email: { 
     required: "We need your email address to contact you", 
     email: "Your email address must be in the format of name@domain.com" 
    } 
    } 
}) 

Answer 3

Je demande au même type de question un certain temps, here is the thread