11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai un petit souci qui me bloque dans mon code ajax. En effet, j'ai un formulaire de connexion dans une popup, j'aimerais quand je le valide qu'il me renvoie vers un autre formulaire sans recharger la page (étape suivante popup). Tout ça marche parfait mais mon problème c'est quand un utilisateur saisit une adresse mail qui n'est pas valide pour se connecter, j'aimerais rester sur la même popup et lui afficher le message d'erreur. Mais dès que je saisisse un émail invalide ça me renvoie vers l'autre popup et en plus m'affiche le message d'erreur.

Ci-dessous le code :



<div class="popup">
       <div id="status1"></div>
        // Formulaire connexion
        <form method="post" action="action1.php" id="myform1">
               <input type="text" name="email" id="email">
               <input type="submit" value="Valider">
        </form>
 
       <div id="status2"></div>
        // Formulaire 
       <form method="post" action="action2.php" id="myform2">
              <input type="text" name="titre" id="titre">
              <input type="submit" name="valider" value="Valider">
       </form>
</div>


// Ajax : traitement formulaire connexion
$(document).ready(function() {
    $('#myform1').on('submit', function(e) {
        e.preventDefault();
 
        var $this = $(this); 
        // on sécurise les données
        var email = encodeURIComponent($('#email').val());
 
        if(email === '') {
            $('#status1').html('<p class="error">Champ invalide  !</p>');
        } else {
            $.ajax({
                url: 'action1.php',
                type: 'post',
                data: $this.serialize(),
                dataType: 'json',
                success: function(data){
                    var myVar = data.split(';')[0];
 
                    if (myVar !== '') {
                        $('#status2').html(myVar);
                        $('#myform2').show();
                        $('#myform1').hide();
                    } 
                }
            });
              return false;
        }
    });
});


// PHP
session_start();
 
    header('Content: application/json', 1);
 
    include('db.php');
 
    // Traitement connexion
    if (isset($_POST['valider'])) {
        if (isset($_POST['email'])) {
            $email = $_POST['email'];
 
            $q = array('email'=>$email);
            $sql = "SELECT count(*) AS nbr, email FROM users WHERE email = :email GROUP BY email";
            $req = $db->prepare($sql);
            $req->execute($q) or die(print_r($db->errorInfo()));
            $data = $req->fetch(PDO::FETCH_ASSOC);
 
            if($data['nbr'] == 1) {
                    $_SESSION['auth'] = 'ok';
 
                    $_SESSION['id'] = $data ['id'];
 
                    $_SESSION['email'] = $email;
 
                    echo '<p class="success">Vous avez été connecté avec succès.</p>;';
 
                    $returnVal = array('myVar', $_SESSION['id']);
                    echo json_encode($returnVal);
                    exit(0);
            } else {
                echo '<p class="error">Erreur lors de la connexion, veuillez vérifier votre adresse mail !</p>';
            }
        } else {
            echo '<p class="error">Vous avez oublié de remplir le champ !</p>';
        }
    }


J'aimerais faire en sorte que quand je valide mon formulaire avec une fausse adresse mail d'afficher une message d'erreur et de rester sur la même popup de connexion. En cas de success avec une bonne adresse, passer directement au formulaire suivant et afficher le message de succès. J'ai regardé sur la FAQ et sur les autres forums mais R.A.S.

Merci par avance !
Hello Smiley smile

Houlà j'ai l'impression que tu te complique un peu trop la vie Smiley smile

alors premièrement php et ajax/jquery se parle très bien en json Smiley smile
Donc... tu peux utiliser un array json dans le retour de ta fonction de ce fait le process est simple Smiley smile

Saisie de l'email
-> envoi de l'ajax vers la page php
-> dans la page php : test du mail.
tu fais toutes les exceptions genre email trouvé ? oui non etc
créa de l'array de retour
$retour["valid"] = 1; si tout est ok sinon = 0
$retour["message"] = "<p>y aune ereur";

-> renvoi via echo json_encode($retour);

-> on revient dans l'ajax : tu fais un myVar = $.parseJSON(data) ;

à partir de là tu a un array JSon que tu peux tester


   if(myVar["valid"] == 1) { c'est tou bon tu peux envoyer le 2eme div }
   else{  Y a une erruer  donc là tu met le contenu du message dans un span ou un div
            message qui se trouve dans myVar["message"];
}


voilà c'est tout con Smiley smile
Bonjour @pchlj,

Merci de m'avoir répondu.
Je n'ai pas bien compris tes explications. Est-ce que tu peux les formaliser par un exemple ?

J'ai utiliser l'objet json pour passer une session utilisateur d'une 1ere popup à la 2eme popup.

Cdlt,
Modifié par dinolam (08 Jul 2016 - 10:18)
Bonjour

alors je vais essayer d'expliquer par un exemple Smiley smile en partant de ton code Smiley cligne


<div class="popup">
       <div id="status1"></div>
        // Formulaire connexion
        <form method="post" action="action1.php" id="myform1">
               <input type="text" name="email" id="email">
               <input type="submit" value="Valider">
        </form>
 
       <div id="status2"></div>
        // Formulaire 
       <form method="post" action="action2.php" id="myform2">
              <input type="text" name="titre" id="titre">
              <input type="submit" name="valider" value="Valider">
       </form>
</div>




// PHP
session_start();
 
    header('Content: application/json', 1);
 
    include('db.php');
 
    // Traitement connexion
    if (isset($_POST['valider'])) {
       $retour['valid'] = 0;
        if (isset($_POST['email'])) {
            $email = $_POST['email'];
 
            $q = array('email'=>$email);
            $sql = "SELECT count(*) AS nbr, email FROM users WHERE email = :email GROUP BY email";
            $req = $db->prepare($sql);
            $req->execute($q) or die(print_r($db->errorInfo()));
            $data = $req->fetch(PDO::FETCH_ASSOC);
            
            if($data['nbr'] == 1) {
                    $_SESSION['auth'] = 'ok';
                     $_SESSION['id'] = $data ['id'];
                     $_SESSION['email'] = $email;
 
                    $retour["message"]= '<p class="success">Vous avez été connecté avec succès.</p>;';
                    $retour['valid'] = 1;
                    $retour['myVar']= $_SESSION['id'];
                    exit();
            } else {
                $retour["message"] = '<p class="error">Erreur lors de la connexion, veuillez vérifier votre adresse mail !</p>';
            }
        } else {
             $retour["message"] = '<p class="error">Vous avez oublié de remplir le champ !</p>';
        }
        echo json_encode($retour);
    }




// Ajax : traitement formulaire connexion
$(document).ready(function() {
    $('#myform1').on('submit', function(e) {
        e.preventDefault();
 
        var $this = $(this); 
        // on sécurise les données
        var email = encodeURIComponent($('#email').val());
 
        if(email === '') {
            $('#status1').html('<p class="error">Champ invalide  !</p>');
        } else {
            $.ajax({
                url: 'action1.php',
                type: 'post',
                data: $this.serialize(),
                dataType: 'json',
                success: function(data){
                    $resultat = $.parseJSON(data);
                    var myVar = $resultat['myVar'];
 
                    if ($resultat['valid']==1) {
                        $('#status2').html(myVar);
                        $('#myform2').show();
                        $('#myform1').hide();
                    }else{
                       $('#status1').html($resultat['message']);
                    }
                }
            });
              return false;
        }
    });
});



voilà bon bien sur te faire l'exemple revient à avoir écrit le code à ta place mais c'est pas très grave ça m'a vraiment pas demander plus de 3 minutes !
J'ai une erreur de ce type : SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data.
L'origine de l'erreur vient du dataType: 'json'. Quand je l'enlève je n'ai plus l'erreur. Par contre le message en cas de succès ne s'affiche pas.

Cdlt,
Modérateur
c'est parce que le JSON est mal formé / invalide.

Le JSON est pprobablement mal formé (d'autres sorties ont lieu dans le code, un var_dump ou print_r qui trainent, ou certains caractères blancs par exemple). Il ne faut surtout pas enlever le «dataType», c'est un gage de qualité, sinon jQuery essaie de «deviner».

Par contre dans le code de pchlj il y a cette ligne:

$resultat = $.parseJSON(data);


Qui génère soit une erreur soit renvoie null ou autre, car jQuery a déjà parsé le résultat de data. data est déjà un objet javascript et non une chaine.
@kustolovic,

Merci de ta réponse. Comment corriger le problème dans ce cas?
L'origine de l'erreur c'est cette ligne: $resultat = $.parseJSON(data);

Cdlt,
Re,

J'ai fait de modification dans mon code et maintenant ça marche.


<?php
// PHP
session_start();
 
include('db.php');
$retour = array(); //initialisation variable de retour


//Récupération PROPRE des variables AVANT de les utilser
$email = !empty($_POST['email']) ? $_POST['email'] : NULL;
$valider = !empty($_POST['valider']) ? $_POST['valider'] : NULL;


// Traitement connexion
if ($valider) {
 if ($email) {
        $sql = "SELECT count(*) AS nbr, email FROM users WHERE email = :email GROUP BY email";
  $q = array(':email'=>$email);
  
  try{
    $req = $db->prepare($sql);
    $req->execute($q);
    $data = $req->fetch(PDO::FETCH_ASSOC);
  }catch(Exception $e){
    //en cas d'erreur dans la requete
    $retour['valid'] = 0;
    $retour['message'] = $e->getMessage();
  }
  
        if($data['nbr'] == 1) {
          $_SESSION['auth'] = 'ok';
          $_SESSION['id'] = $data ['id'];
          $_SESSION['email'] = $email;
          $retour["message"]= '<p class="success">Vous avez été connecté avec succès.</p>;';
          $retour['valid'] = 1;
          $retour['myVar']= $_SESSION['id'];
        } else {
    $retour['valid'] = 0;
    $retour["message"] = '<p class="error">Erreur lors de la connexion, veuillez vérifier votre adresse mail !</p>';
        }
    } else {
      $retour['valid'] = 0;
      $retour["message"] = '<p class="error">Vous avez oublié de remplir le champ !</p>';
    }
}else{
 $retour['valid'] = 0;
 $retour['message'] = "<p class='error'>valider n'existe pas !</p>";
}

//on retourne le résultat
echo json_encode($retour);


/ Ajax : traitement formulaire connexion
$(document).ready(function() {
    $('#myform1').on('submit', function(e) {
        e.preventDefault();
 
        var $this = $(this); 
        // on sécurise les données
        var email = encodeURIComponent($('#email').val());
 
        if(email === '') {
            $('#status1').html('<p class="error">Champ invalide  !</p>');
        } else {
            $.ajax({
                url: 'action1.php',
                type: 'post',
                data: $this.serialize(),
                dataType: 'json',
                success: function(data){
      //pour debuguer au cas ou...
      // utilise la console de ton navigateur
      // et regarde ce que t'affiche l'instruction
      // console.log(data)
                   if (data.valid ==1) {
        var myVar = data.myVar;
                        $('#status2').html(myVar);
                        $('#myform2').show();
                        $('#myform1').hide();
                   }else{
                       $('#status1').html(data.message);
                   }
                },
      error: function (request, status, error) {
                   alert(request.responseText);
               }
            });
              return false;
        }
    });
});

Merci beaucoup pour votre aide !

A bientôt !
dinolam a écrit :
Re,

J'ai fait de modification dans mon code et maintenant ça marche.


&lt;?php
// PHP
session_start();
 
include('db.php');
$retour = array(); //initialisation variable de retour


//Récupération PROPRE des variables AVANT de les utilser
$email = !empty($_POST['email']) ? $_POST['email'] : NULL;
$valider = !empty($_POST['valider']) ? $_POST['valider'] : NULL;


// Traitement connexion
if ($valider) {
 if ($email) {
        $sql = "SELECT count(*) AS nbr, email FROM users WHERE email = :email GROUP BY email";
  $q = array(':email'=&gt;$email);
  
  try{
    $req = $db-&gt;prepare($sql);
    $req-&gt;execute($q);
    $data = $req-&gt;fetch(PDO::FETCH_ASSOC);
  }catch(Exception $e){
    //en cas d'erreur dans la requete
    $retour['valid'] = 0;
    $retour['message'] = $e-&gt;getMessage();
  }
  
        if($data['nbr'] == 1) {
          $_SESSION['auth'] = 'ok';
          $_SESSION['id'] = $data ['id'];
          $_SESSION['email'] = $email;
          $retour["message"]= '&lt;p class="success"&gt;Vous avez été connecté avec succès.&lt;/p&gt;;';
          $retour['valid'] = 1;
          $retour['myVar']= $_SESSION['id'];
        } else {
    $retour['valid'] = 0;
    $retour["message"] = '&lt;p class="error"&gt;Erreur lors de la connexion, veuillez vérifier votre adresse mail !&lt;/p&gt;';
        }
    } else {
      $retour['valid'] = 0;
      $retour["message"] = '&lt;p class="error"&gt;Vous avez oublié de remplir le champ !&lt;/p&gt;';
    }
}else{
 $retour['valid'] = 0;
 $retour['message'] = "&lt;p class='error'&gt;valider n'existe pas !&lt;/p&gt;";
}

//on retourne le résultat
echo json_encode($retour);


/ Ajax : traitement formulaire connexion
$(document).ready(function() {
    $('#myform1').on('submit', function(e) {
        e.preventDefault();
 
        var $this = $(this); 
        // on sécurise les données
        var email = encodeURIComponent($('#email').val());
 
        if(email === '') {
            $('#status1').html('&lt;p class="error"&gt;Champ invalide  !&lt;/p&gt;');
        } else {
            $.ajax({
                url: 'action1.php',
                type: 'post',
                data: $this.serialize(),
                dataType: 'json',
                success: function(data){
      //pour debuguer au cas ou...
      // utilise la console de ton navigateur
      // et regarde ce que t'affiche l'instruction
      // console.log(data)
                   if (data.valid ==1) {
        var myVar = data.myVar;
                        $('#status2').html(myVar);
                        $('#myform2').show();
                        $('#myform1').hide();
                   }else{
                       $('#status1').html(data.message);
                   }
                },
      error: function (request, status, error) {
                   alert(request.responseText);
               }
            });
              return false;
        }
    });
});

Merci beaucoup pour votre aide !

A bientôt !