[AJAX] Formulaire de connexion Ajax

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 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<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>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
// 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;
        }
    });
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<?php
// 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 !