Formulaire de connexion jQuery - Ajax [Résolu]

Question

Posez votre question Signaler

Formulaire de connexion jQuery - Ajax [Résolu]

Utilisateur anonyme - Modifié par dinolam le 7/07/2016 à 16:20 - Dernière réponse : Utilisateur anonyme - 12 juil. 2016 à 11:07

Javascript / DHTML Posez votre question Signaler

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 !

Afficher la suite

A voir également:

Formulaire ajax jquery
Ajax formulaire - Meilleures réponses
Tuto ajax jquery - Meilleures réponses
Validation de formulaire avec jQuery : problème textarea ✓ - Forum - Javascript / DHTML
Envois de formulaire ajax ✓ - Forum - Javascript / DHTML
Formulaire Ajax ✓ - Forum - Javascript / DHTML
Ajax - un seul appel de fonctions pour faire des liens et soumettre des formulaires - Codes sources - Javascript (Formulaire)
Javascript : Envoi de formulaire avec de l'ajax - CodeS SourceS - Guide

Votre réponse

Répondre au sujet

8 réponses

Votre réponse

Répondre au sujet

Posez votre question

jordane45 · Answer 1 · 2016-07-08T01:00:33+0200

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 24573
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 19 février 2019

362 8 juil. 2016 à 01:00

0

Merci

Bonjour,

Mais dès que je saisisse un émail invalide ça me renvoie vers l'autre popup

En même temps... ton IF pour l'instant ne fait que vérifier que le champ email n'est pas vide...

 if(email === '') {

Pour vérifier si le format du mail est valide il te faut utiliser une regex.
Par exemple :

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

Et pour l'utiliser (dans ton if..)

 if(email === '' || !validateEmail(email)) {

Utilisateur anonyme · Answer 2 · 2016-07-08T10:15:06+0200

Bonjour @jordane45,

Merci d'avoir pris le temps de me répondre et merci des explications. En fait, mon problème n'est pas la validation du format de mail, mais plutôt la vérification de l'existence du mail dans la base de données. C'est pour empêcher la connexion d'utilisateur qui n'est pas inscrit sur le site. Mais ça je l'ai fait en php puisque j'ai un message d'erreur qui s'affiche en cas de saisie d'un mail qui n'existe pas. Ce que j'aimerais faire est que ce message s'affiche sur la popup de connexion sans qu'il y ait passage à la 2eme popup.

En cas de succès (validation mail existant) je passe directement à la popup suivante (2eme) et mon message de succès s'affiche là.

Est-ce que j'ai bien expliqué mon problème?

Cdlt,

@karamel · Answer 3 · 2016-07-08T11:25:53+0200

Signaler Commenter la réponse de @karamel

@karamel

Messages postés: 1666
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 23 janvier 2019

33 8 juil. 2016 à 11:25

0

Merci

il faut gerer le retour ajax

sur cette tu ne fait que tester si myVar est vide

if (myVar !== '') {
                        $('#status2').html(myVar);
                        $('#myform2').show();
                        $('#myform1').hide();
                    }

teste déjà le retour en mettant une alerte ou un console.log et après tu décidé de l'action en fonction de la réponse.

alert(myVar)

Utilisateur anonyme · Answer 4 · 2016-07-08T15:35:38+0200

Re,

J'ai modifié mon code que j'ai mis ci-dessus. Ça marche quand je saisie une fausse adresse mail mais je n'arrive pas maintenant à afficher le message de succès sur la 2eme popup.

Au début 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.

Merci !


// 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;
        }
    });
});

jordane45 · Answer 5 · 2016-07-08T18:52:01+0200

Bonjour,

Côté PHP :

<?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);

Côté JS :

// 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;
        }
    });
});

Cordialement,
Jordane

Utilisateur anonyme · Answer 6 · 2016-07-10T10:09:08+0200

Signaler Commenter la réponse de Utilisateur anonyme

Utilisateur anonyme 10 juil. 2016 à 10:09

0

Merci

Bonjour@jordane45,

Merci pour ces précisions. Je ferai le test demain et je reviendrai vers toi.

Bon dimanche !

Utilisateur anonyme · Answer 7 · 2016-07-11T10:46:39+0200

Signaler Commenter la réponse de Utilisateur anonyme

Utilisateur anonyme 11 juil. 2016 à 10:46

0

Merci

Ça marche très bien. Seulement un petit souci au lien de m'afficher le message ce succès :

$retour["message"] = '<p class="success">Vous avez été connecté avec succès.</p>;';

Il m'affiche l'id de la session utilisateur. Comment masquer cet id et afficher mon message?

Merci !

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 24573
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 19 février 2019

362 - 12 juil. 2016 à 01:17

Ben tu modifies la variable myvar dans le php ou tu changes le code côté javascript pour afficher message au lieu de myvar

Signaler Commenter la réponse de Utilisateur anonyme

Utilisateur anonyme > jordane45

Messages postés: 24573
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 19 février 2019

- Modifié par dinolam le 12/07/2016 à 09:56

En fait, le problème ce ma requête n'arrive pas à me renvoyer en même temps le message de succès et l'id de la session. J'en ai besoin de l'id de session pour poursuivre sur la 2e popup. Mais il faut qu'il soit cacher juste le message de succès qui doit s'afficher.

Merci !

Utilisateur anonyme · Answer 8 · 2016-07-12T11:07:09+0200

J'ai réglé le problème.
J'ai juste modifié cette ligne :

$retour["message"] = '<p class="success">Vous avez été connecté avec succès.</p>;';

Par

$retour["myVar"] = '<p class="success">Vous avez été connecté avec succès.</p>;';

Et je l'ai placé juste après cette ligne :

$retour['myVar']= $_SESSION['id'];

Merci beaucoup les gars et surtout @jordane45 pour votre aide !

A bientôt !

Formulaire de connexion jQuery - Ajax [Résolu]

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !