Question Ajax : Formulaire - Affichage des Erreurs

[noren]

Bonjour

En ajax, je souhaiterais lors d'un ajout de commentaire pouvoir indiquer directement les erreurs en dessous de chaque champ concerné.

Exemple si un visiteur tape un pseudo non conforme, une erreur s'affiche en rouge en dessous du champ input "pseudo".

J'arrive à afficher toutes les erreurs en un seul bloc en haut du formulaire, dans une div ayant pour class "error", via les données retournées dans "data".

voici mon script jquery

$("#formcom").submit(function()
   {
      $("#loader").show();	       
      pseudo = $(this).find("input[name=pseudo]").val();
      commentaire = $(this).find("textarea[name=commentaire]").val();
      mail = $(this).find("input[name=mail]").val();
      site = $(this).find("input[name=site]").val();
      idart = $(this).find("input[name=idart]").val();
      urladdcom=$(this).find("input[name=urladdcom]").val();
      code=$(this).find("input[name=code]").val();
      $.post(urladdcom, {pseudo: pseudo, commentaire: commentaire, mail: mail, site: site, idart: idart, code: code}, function(data){
         $("#loader").hide();
         if(data!="ok"){
            $(".error").empty().append(data).hide().fadeIn(1000);
         }
         else
         {
            $(".error").hide().empty();
            $(".valide").hide().html("<p>Merci, votre commentaire sera affiché après modération</p>").slideDown(1000);
            $("#formcom").fadeOut();
         }
      });
      return false;
   }
   );

urladdcom = mon contrôleur qui traite l'ajout et qui renvoi via echo "ok" ou la liste des erreurs.

En gros comment puis je traiter "data" afin de décomposer la sortie et afficher les erreurs en dessous des champs concernés? exemple si le visiteur fait une erreur avec le pseudo et avec l'email

Faut il dans ce cas obligatoirement passer par json ou xml?

PS : je précise que je débute en jquery ( voir même javascript tout court :mrgreen: )

 

[loubet]

Faut il dans ce cas obligatoirement passer par json ou xml?

obligatoire non, maintenant, c'est surement plus rapide de ne pas réinventer la roue.
en php
$tab['mail"] = "ok";
$tab["pseudo"] = "Trop court";
tu encodes ton tableau avec la fonction qui va vient bien et le retournes :
echo json_encode($tab);
en javascript, tu récupères les données, decodes le json et tu affiches ce que tu veux.

 

[noren]

Ahhhh génial merci :mrgreen:

ca a l'air tout bête en effet,

par contre va falloir que je regarde ca pour traiter les données via javascript pour les afficher dans le bon div, si tu avais la ligne qui recupere ces données json en jquery? :mrgreen:
Sinon pas grave je vais chercher de mon côté :wink:

j’imagine que c'est du côté de JSON.parse qu'il faut que je me tourne

 

[noren]

bon alors on dirait que ca marche j'ai fait ceci :

$("#formcom").submit(function()
   {
      $("#loader").show();	       
      pseudo = $(this).find("input[name=pseudo]").val();
      commentaire = $(this).find("textarea[name=commentaire]").val();
      mail = $(this).find("input[name=mail]").val();
      site = $(this).find("input[name=site]").val();
      idart = $(this).find("input[name=idart]").val();
      urladdcom=$(this).find("input[name=urladdcom]").val();
      code=$(this).find("input[name=code]").val();
      $.post(urladdcom, {pseudo: pseudo, commentaire: commentaire, mail: mail, site: site, idart: idart, code: code}, function(data){
         $("#loader").hide();
         if(data!="ok"){            
            if(data["pseudo"])
               $(".errorpseudo").empty().append(data["pseudo"]).hide().fadeIn(1000);
            if(data["code"])
               $(".errorcode").empty().append(data["code"]).hide().fadeIn(1000);   
 ....
...          
         }
         else
         {
            $(".error").hide().empty();
            $(".valide").hide().html("<p>Merci, votre commentaire sera affiché après modération</p>").slideDown(1000);
            $("#formcom").fadeOut();
         }
      }, 'json');
      return false;
   }
   );

Donc en gros le json_encode() dans mon controleur pour retourner le tableau

ensuite je précise dans mon $.post(...,..., 'json')

Et de cette facon je peux bien récuperer mon data sous forme de tableau que je peux tester pour afficher les valeurs dans les bonnes div.

Tout semble fonctionner, mais dites moi si j'ai fait une erreur grossière? :mrgreen:

 

[spout]

Tu peux utiliser .serialize() http://api.jquery.com/serialize/ pour récupérer les datas de ton form, ainsi tu éviteras une certaine redondance (DRY rulez).

 

[noren]

merci je vais regarder ca :wink:

 

[noren]

Bon alors en cherchant sur le net j'ai réussi à faire un truc dans le genre :

$("#formcom").on("submit", function(event) {
      event.preventDefault();

      $.ajax({
         url: "commentaires/add",
         type: "post",
         data: $(this).serialize(),
         dataType : "json",
         success: function(d) {
            $("#loader").hide();
            if(d!="ok"){            
               if(d["pseudo"]!=null)
                  $(".errorpseudo").empty().append(d["pseudo"]).hide().fadeIn(1000);
               else
                  $(".errorpseudo").hide().empty();
            }
            else
            {
               $(".valide").hide().html("<p>Merci, votre commentaire sera affiché après modération</p>").slideDown(1000);
               $("#formcom").fadeOut();
            }
         }
      });
  });

pour l'url le retour du chmap action, ca c'ets aps un soucis.

mais je dois avouer que dans cette solution, même si je comprend une partie de ce que j'ai fait, je suis loin de tout maitriser

je comprend pas la différence entre :

$("#formcom").on("submit", function(event)

et

$("#formcom").submit(function()

Après si je veux afficher les messages d'erreur aux bons endroits je suis malgré tout obligé de faire ce type de test dans ma function javascript :

f(d["pseudo"]!=null)
                  $(".errorpseudo").empty().append(d["pseudo"]).hide().fadeIn(1000);
               else
                  $(".errorpseudo").hide().empty();

alors en fin de compte je ne peux plus vraiment me servir de cette fonction comme fonction générale pour tous les formulaires ajax? résultat le serialize n'aurait presque pas d'intérêt? :roll: