Question Ajax : Formulaire - Affichage des Erreurs

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par noren, 15 Mai 2014.

  1. noren
    noren WRInaute accro
    Inscrit:
    8 Avril 2011
    Messages:
    2 816
    J'aime reçus:
    18
    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
    Code:
    $("#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: )
     
  2. loubet
    loubet WRInaute impliqué
    Inscrit:
    19 Février 2003
    Messages:
    788
    J'aime reçus:
    0
    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.
     
  3. noren
    noren WRInaute accro
    Inscrit:
    8 Avril 2011
    Messages:
    2 816
    J'aime reçus:
    18
    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
     
  4. noren
    noren WRInaute accro
    Inscrit:
    8 Avril 2011
    Messages:
    2 816
    J'aime reçus:
    18
    bon alors on dirait que ca marche j'ai fait ceci :

    Code:
    $("#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:
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 152
    J'aime reçus:
    334
  6. noren
    noren WRInaute accro
    Inscrit:
    8 Avril 2011
    Messages:
    2 816
    J'aime reçus:
    18
    merci je vais regarder ca :wink:
     
  7. noren
    noren WRInaute accro
    Inscrit:
    8 Avril 2011
    Messages:
    2 816
    J'aime reçus:
    18
    Bon alors en cherchant sur le net j'ai réussi à faire un truc dans le genre :

    Code:
    $("#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 :

    Code:
    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:
     
Chargement...
Similar Threads - Ajax Affichage Erreurs Forum Date
Problème dans l'affichage calendrier dynamique avec AJAX Développement d'un site Web ou d'une appli mobile 19 Avril 2010
Probleme reaffichage avec ajax Développement d'un site Web ou d'une appli mobile 19 Juin 2007
Sites de scripts PHP, jQuery, Ajax, etc. Le café de WebRankInfo 20 Mars 2022
Conflit jquery ajax Développement d'un site Web ou d'une appli mobile 10 Février 2022
Problème avec un menu en ajax via jquery Problèmes de référencement spécifiques à vos sites 6 Février 2022
Afficher les produits suivants en ajax Développement d'un site Web ou d'une appli mobile 12 Mai 2020
Requête Ajax avec code source visible Développement d'un site Web ou d'une appli mobile 14 Mars 2020
JS Ajax PHP e-MAIL Développement d'un site Web ou d'une appli mobile 17 Juin 2019
Comment stopper l'exécution de script ajax Développement d'un site Web ou d'une appli mobile 21 Avril 2019
Ajax et duplicate content (Single Page Application) Crawl et indexation Google, sitemaps 1 Mars 2019
Supprimer ajax d'une petite fonction JS Développement d'un site Web ou d'une appli mobile 29 Novembre 2018
Google ne reconnaît pas Ajax !? Référencement Google 30 Août 2018
AJAX BESOIN D'AIDE Développement d'un site Web ou d'une appli mobile 2 Juin 2018
Indexation et ranking de sites en AJAX Référencement Google 28 Mars 2018
Fonction Ajax qui bug parfois Développement d'un site Web ou d'une appli mobile 11 Mars 2018
Stopper execution $.ajax() après un clic Développement d'un site Web ou d'une appli mobile 5 Mars 2017
Une question à propos d'Ajax Développement d'un site Web ou d'une appli mobile 27 Octobre 2016
Impossible de supprimer anciennes pages en ajax + duplicate content Crawl et indexation Google, sitemaps 7 Juin 2016
Upload via Ajax et limitation post_max_size (php.ini) Développement d'un site Web ou d'une appli mobile 11 Février 2016
Crawl AJAX - galère, galère Crawl et indexation Google, sitemaps 21 Décembre 2015