Vérifier concordance passwords au fur et à mesure de la saisie

**clickandgo** · 23/07/2021, 13h15

Bonjour à tous,

Je n'arrive pas à faire en sorte que lorsqu'un utilisateur se trompe dans la confirmation de son mot de passe celui-ci soit retesté si changements dans les inputs correspondants.

Je ne sais pas où placer les 'keyup' ou 'change' pour que cela marche...

D'autre part, pourquoi si je mets e.preventDefault juste après la première ligne, le code ne s'éxécute pas même si il n'a rencontré aucun "return false" ?

Les tests coté serveur et formulaire fonctionnent puisque il n'y a pas de soumission de formulaire si les mdp ne correspondent pas, cependant comment implémenter la possibilité de continuer à tester les champs password avant de recliquer à nouveau sur le bouton submit ?

Merci d'avance

Voici le code fonctionnel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
$(function () {
    $('#registrationForm').submit(function (e) {
        var valid = this.checkValidity();
 
        if (valid) {
 
            var userName = $('#userName').val()
            var userPassword = $('#userPassword').val()
            var confirmUserPassword = $('#confirmUserPassword').val()
            var userPhone = $('#userPhone').val()
            var userEmail = $('#userEmail').val()
 
            //e.preventDefault()
            //e.stopPropagation()
            //On vérifie que les 2 mots de passe sont égaux :
 
            function validatePassword() {
 
 
                if (userPassword != confirmUserPassword) {
                    $('#errUserConfirmPassword').text("ATTENTION : Les deux mots de passe renseignés ne correspondent pas.");
                    e.preventDefault()
                    alert('no-match')
                    return false
                } else {
                    $('#errUserConfirmPassword').text("Les mots de passe correspondent.")
                    alert('match')
                    return true
                }
            }
 
            validatePassword()
 
 
            $.ajax({
                type: 'POST',
                url: './includes/registrationForm.php',
                data: {
                    userName: userName,
                    userPassword: userPassword,
                    userPhone: userPhone,
                    userEmail: userEmail
                },
                dataType: 'json',
                encode: true,
            }).done(function (data) {
                alert('Utilisateur enregistré !.')
            })
        }
 
    })
    $('#userPassword')[0].keyup = validatePassword();
    $('#confirmUserPassword')[0].keyup = validatePassword();
})

**ABCIWEB** · 24/07/2021, 06h31

Salut,

Tu es assez loin du compte. Essaies plutôt le code ci-dessous dans une page séparée.

Si cela ne fonctionne pas c'est que la destination de la requête ajax n'est pas bonne, et tu auras un message. Tu auras aussi des messages si les mots de passe ne correspondent pas ou sont trop courts. Il y a deux systèmes de contrôle pour les mots de passe, un durant le renseignement du mot de passe de confirmation qui colore le bord de l'input en rouge et en vert lorsqu'il est égal. Et un second contrôle à la soumission du formulaire qui contrôle l'égalité des mdp et la longueur minimale.

Enfin bon tout cela doit être recontrôler côté php, bien entendu. C'est php qui est responsable de la sécurité réelle (le javascript peut être piraté). Notes que j'ai voulu éviter les id redondants dans le formulaire puisqu'il est très facile d'accéder au champs sans cela. Et puis j'ai utilisé la fonction "slide" pour afficher le bloc de message, c'est plus cool et autant en profiter puisque tu utilises jQuery.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
</head>
 
<body>
<form id="myform" action = '#' method = "post">
 
<p><label>name <input type="text" name = "userName" required></label></p>
<p><label>Password <input type="password" name = "userPassword" required></label></p>
<p><label>Confirm Password <input type="password" name = "confirmUserPassword" required></label></p>
<p><label>Phone <input type="text" name = "userPhone" required></label></p>
<p><label>Email <input type="text" name = "userEmail" required></label></p>
<p class="message" style="display:none;color:red;font-family:Verdana, Geneva, sans-serif"></p>
<input type="submit" value= "Envoyer">
</form>
 
 
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function () {
 
        var form = $('#myform');
        // Récupère les variables utiles au script    
        var message = form.find('p.message');
        var userPassword = form.find('input[name=userPassword]');
        var confirmUserPassword = form.find('input[name=confirmUserPassword]');
        
        // Comportement onkeyup du champ confirmUserPassword
        confirmUserPassword.on("keyup", function()
        {
                // Bord rouge tant que le champ n'est pas égal au précédent, bord vert si égalité
                userPassword.val() != $(this).val()? $(this).css('border','2px solid red') : $(this).css('border','2px solid green');
                //Pour fermer le message d'alerte dès que l'on change le mot de passe s'il est trop court ou ne correspond pas à userPassword
                message.slideUp();
        })
        
        // Pour fermer le message d'alerte dès que l'on change le mot de passe s'il est trop court
        userPassword.on("keyup", function()
        {
                message.slideUp();
        })
        
        // Soumission du formulaire
        form.on("submit", function (e) {
                // Supprime le comportement par défaut pour être envoyé via Ajax
                e.preventDefault();
                e.stopPropagation();
                
                // Contrôle l'égalité des password
                if(userPassword.val() != confirmUserPassword.val())
                {
                        message.text("Les deux mots de passe renseignés ne correspondent pas. Veuillez corriger!").slideDown();
                        return false;
                }
                // Contrôle la longueur minimum du password
                else if(userPassword.val().length < 6)
                {
                        message.text("Le mot de passe doit être composé de six caractères minimum. Veuillez corriger!").slideDown();
                        return false;
                }
                // Si tout est ok on soumet le formulaire
                else
                {
                        var data = form.serializeArray(); //serializeArray() récupère tous les champs du formulaire 
                        $.ajax({
                                type: "POST",
                                url:"./includes/registrationForm.php",
                                data: data,
                                dataType: 'json'        
                                }).done(function (result) {
                                        message.css('color','green').text("Vous êtes enregistré !").slideDown();
                                        // Normalement le script php devrait lui-même renvoyer le message de confirmation et donc ce serait :
                                        // message.css('color','green').text(result).slideDown();
                                        
                                }).fail(function() {
                                        // Principalement pour debug durant le développement si la destination de la requête ajax n'est pas bonne 
                                        message.text("La requête Ajax n'a pas abouti").slideDown();
                                })
                }
    })
})
</script>
</body>
</html>

**clickandgo** · 24/07/2021, 13h18

Bonjour

Tout d'abord te remercier pour le temps que tu as consacré à cette réponse, cela m'a permis de mieux comprendre comment faire, cependant :

1/ je tombe systématiquement sur le message "La requête AJAX n'a pas abouti" : j'ai donc vérifié mon url (url: "/includes/registrationForm.php",), cela ne marche pas même si je mets "./includes/registrationForm.php" pour revenir au dossier principal ...

2/ Je voudrais que les messages de retour serveur qui ont été encodés en JSON (echo json_encode($result) soient exploitables dans le JQUERY pour pouvoir les afficher dans le formulaire or l'argument error dans l'ajax semble ne plus pouvoir être utilisé comme je faisais anciennement ...

A noter que pour les reste, ton code fonctionne parfaitement

Voici mon code actuellement :

registrationForm.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
$(function () {
 
    var form = $('#registrationForm');
    // Récupère les variables utiles au script      
    var message = form.find('p.message');
    var userPassword = form.find('input[name=userPassword]');
    var errUserPassword = form.find('errUserPassword');
    var confirmUserPassword = form.find('input[name=confirmUserPassword]');
    var errConfirmUserPassword = form.find('errConfirmUserPassword');
 
    // Comportement onkeyup du champ confirmUserPassword
    confirmUserPassword.on("keyup", function () {
        // Bord rouge tant que le champ n'est pas égal au précédent, bord vert si égalité
        userPassword.val() != $(this).val() ? $(this).css('border', '2px solid red') : $(this).css('border', '2px solid green');
        //Pour fermer le message d'alerte dès que l'on change le mot de passe s'il est trop court ou ne correspond pas à userPassword
        errConfirmUserPassword.text('Les deux mots de passe ne correspondent pas.')
    })
 
    // Pour fermer le message d'alerte dès que l'on change le mot de passe s'il est trop court
    userPassword.on("keyup", function () {
        message.slideUp();
    })
 
    // Soumission du formulaire
    form.on("submit", function (e) {
        // Supprime le comportement par défaut pour être envoyé via Ajax
        e.preventDefault();
        e.stopPropagation();
 
        // Contrôle l'égalité des password
        if (userPassword.val() != confirmUserPassword.val()) {
            message.text("Les deux mots de passe renseignés ne correspondent pas. Veuillez corriger!").slideDown();
            return false;
        }
        // Contrôle la longueur minimum du password
        else if (userPassword.val().length < 6) {
            message.text("Le mot de passe doit être composé de six caractères minimum. Veuillez corriger!").slideDown();
            return false;
        }
        // Si tout est ok on soumet le formulaire
        else {
            var data = form.serializeArray(); //serializeArray() récupère tous les champs du formulaire 
            $.ajax({
                type: "POST",
                url: "/includes/registrationForm.php",
                data: data,
                dataType: 'json'
            }).done(function (result) {
                //message.css('color', 'green').text("Vous êtes enregistré !").slideDown();
                // Normalement le script php devrait lui-même renvoyer le message de confirmation et donc ce serait :
                message.css('color', 'green').text(result).slideDown();
                //retour erreurs serveur / script php
            }).error(function (error) {
                message.css('color', 'green').text(error).slideDown();
 
            }).fail(function () {
                // Principalement pour debug durant le développement si la destination de la requête ajax n'est pas bonne 
                message.text("La requête Ajax n'a pas abouti").slideDown();
            })
        }
    })
})

registrationForm.php : (le code sera externalisé plus tard dans un fichier à part)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<div id="registrationFormModal" name="registrationFormModal" class="modal">
    <form class="modal-content animate" action="#" name="registrationForm" id="registrationForm" method="POST">
 
        <div class="imgcontainer">
            <span onclick="document.getElementById('registrationForm').style.display='none'" class="close" title="Fermer ce formulaire">&times;</span>
            <img src="" alt="" class="">
        </div>
        <h1 class="formTitle">Formulaire d'inscription</h1>
        <div class="form-wrapper">
 
            <label for="userName"><b> Nom d'utilisateur</b></label>
            <input type="text" placeholder="Votre Pseudo ou votre nom d'utilisateur" name="userName" required>
            <span id="errUserName">coucou</span>
 
            <label for="userEmail"><b>Mail</b></label>
            <input type="email" placeholder="Votre mail principal" name="userEmail" required>
            <span id="errUserEmail">coucou</span>
 
            <label for="userPhone"><b>Telephone principal(facultatif)</b></label>
            <input type="text" placeholder="Votre telephone principal" name="userPhone">
            <span id="errUserPhone">coucou</span>
 
            <label for="userPassword"><b>Mot de passe</b></label>
            <input type="password" placeholder="Votre mot de passe" name="userPassword" id="userPassword" required>
            <span id="errUserPassword">coucou</span>
 
            <label for="confirmUserPassword"><b>Confirmer le mot de passe</b></label>
            <input type="password" placeholder="Votre mot de passe" name="confirmUserPassword" id="confirmUserPassword" required>
            <span id="errUserConfirmPassword">test erreur confirmation password</span>
 
            <p class="message" style="display:none;color:red;font-family:Verdana, Geneva, sans-serif"></p>
 
            <button type="submit" name="registration-btn" id="registration-btn">S'inscrire</button>
 
        </div>
 
        <div class="form-footer" style="background-color:#f1f1f1">
            <button type="button" onclick="document.getElementById('registrationForm').style.display='none'" class="cancelbtn">Annuler et fermer</button>
 
        </div>
    </form>
</div>
<?php
 
//Vérification envoi du formulaire d'inscription
if ($_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST['registration-btn'])) {
    echo '<br>' . 'registration form submitted';
 
    $userName            = $_POST['userName'];
    $userPassword        = $_POST['userPassword'];
    $confirmUserPassword = $_POST['confirmUserPassword'];
    $userEmail           = $_POST['userEmail'];
    $userPhone           = $_POST['userPhone'];
    $result = array();
 
    //Instanciation de la classe / Modèle User
    $newUser = new User();
    //$userId = $newUser->$userId;
 
    echo '<br>' . $userName . ' ' . $userPassword . ' ' . $confirmUserPassword . ' ' . $userPhone . ' ' . $userEmail;
 
    //Vérification si existence de l'utilisateur dans la table users
    if (isset($_POST['userName']) && !empty($_POST['userName'])) {
 
        if ($newUser->userNameCheck($userName) == true) {
            exit("Ce nom d'utilisateur existe déjà dans notre base, veuillez en trouver un autre.");
            $result['error'] = "Ce nom d'utilisateur existe déjà dans notre base, veuillez en trouver un autre.";
        }
    }
 
    //Vérification si existence de l'email utilisateur dans la table users
    if (isset($_POST['userEmail']) && !empty($_POST['userEmail'])) {
 
        if ($newUser->userEmailCheck($userEmail) == true) {
            exit('Cet email existe déjà dans notre base, veuillez en choisir un autre.');
            $result['error'] = "Cet email existe déjà dans notre base, veuillez en choisir un autre.";
        }
        //Vérification si l'email est valide
        elseif (!filter_var($userEmail, FILTER_VALIDATE_EMAIL)) {
            exit('Cet email semble invalide, veuillez vérifier que son format est correct');
            $result['error'] = "Cet email existe déjà dans notre base, veuillez en choisir un autre.";
        }
    }
 
    //On procède à l'enregistrement de l'utilisateur dans la table users si les tests précédents se sont réalisés correctement   
 
    //On crypte le mot de passe avant envoi au serveur
    $userPassword = password_hash($_POST['userPassword'], PASSWORD_ARGON2ID);
 
    //On crée le compte de l'utilisateur si aucune erreur
    $newUser->createUser($userName, $userEmail, $userPassword,  $userPhone);
    //echo 'Dernier Id utilisateur enregistré = ' . $userId;
    echo json_encode($result);
}
?>

**Toufik83** · 25/07/2021, 02h16

Bonjour,

C'est normal que $.ajax passe au callback fail car la réponse de ton fichier registrationForm.php ne renvoit pas de données json, mais du json ET HTML.

Il va falloir supprimer/déplacer le code html de registrationForm.php et le mettre dans la page d'inscription et pas dans le fichier php, et supprimer aussi les exit().

Utilise aussi les variables de fail pour identifier les erreurs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
...
.fail(function (erreur) {
       // Principalement pour debug durant le développement si la destination de la requête ajax n'est pas bonne 
       message.text("La requête Ajax n'a pas abouti :"+erreur.responseText) //en json, le message d'erreur est enregistré dans la propriété responseText
      .slideDown();
})

**ABCIWEB** · 25/07/2021, 03h45

Envoyé par clickandgo

Bonjour

Tout d'abord te remercier pour le temps que tu as consacré à cette réponse, cela m'a permis de mieux comprendre comment faire, cependant :

1/ je tombe systématiquement sur le message "La requête AJAX n'a pas abouti" : j'ai donc vérifié mon url (url: "/includes/registrationForm.php",), cela ne marche pas même si je mets "./includes/registrationForm.php" pour revenir au dossier principal ...

Cela ne m'étonne pas car en voyant l'adresse de destination de ton fichier php Ajax, je me disais qu'il y avait de fortes chances que cela ne fonctionne pas, d'où le fait que j'ai rajouté la clause "fail" pour que tu comprennes mieux ton erreur. En fait tu n'es pas dans le système de fichiers de php, mais sur une page web et la syntaxe des adresses de fichiers est la même que pour n'importe quel attribut "src" d'une page html, donc les liens doivent être définis de la même manière. Tu peux essayer une url complète (absolue) de type https://www.monsite.com/includes/registrationForm.php. Le seul problème est que cela ne fonctionnera que sur ton serveur distant, et inversement si tu défini l'adresse pour le serveur d'évaluation il faudra changer cette adresse si tu poses ton fichier sur le serveur distant. Une solution est de définir une constante BASE_HREF (tu peux l'appeler comme tu veux) pour définir la base de l'url relative. Par exemple :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
define('LOCALHOST', 'http://monsite/');// Adresse du site sur wampserver (virtualHost)
define('DOSSIER_EVALUATION', 'wamp64\www');// Adresse du serveur d'évaluation (wampserver)
define('NOM_DOMAINE', 'https://www.monsite.com/');// Adresse du site sur internet
define('BASE_HREF', strpos(__FILE__,DOSSIER_EVALUATION) !== 0 ? LOCALHOST : NOM_DOMAINE);

Donc ensuite tu peux te servir de BASE_HREF pour définir le chemin de tes fichiers toujours par rapport à la racine du serveur, par exemple url: "<?=BASE_HREF?>includes/registrationForm.php"

J'ai appelé cette constante "BASE_HREF" parce que c'est elle que j'utilise pour définir la balise base dans le html par exemple: <base href="<?=BASE_HREF?>">. Mais attention si tu fais cela tous tes attributs sources relatifs (images, lien css, liens javascript etc. contenus dans ta page html) devront être définis par rapport à la racine du serveur, exceptés évidemment ceux qui ont une URL absolue. Cela te permettrais d'écrire url: "includes/registrationForm.php" puisqu'en fait la balise html "base" complétera ce chemin pour écrire au final soit http://monsite/includes/registrationForm.php si tu es sur ton serveur d'évaluation, soit https://www.monsite.com/includes/registrationForm.php si tu es sur ton serveur distant (internet).

Envoyé par clickandgo

2/ Je voudrais que les messages de retour serveur qui ont été encodés en JSON (echo json_encode($result) soient exploitables dans le JQUERY pour pouvoir les afficher dans le formulaire.

Json_encode c'est bon pour renvoyer des tableaux php. Si tu veux renvoyer un tableau tu peux faire echo json_encode(['messagephp'=>'enregistrement ok']); et donc dans le retour de la requête ajax tu pourras récupérer cette valeur en faisant message.css('color', 'green').text(result.messagephp).slideDown();. Mais bon si c'est pour renvoyer simplement une chaine de texte tu peux tout aussi bien faire echo 'enregistrement ok'; et ensuite message.css('color', 'green').text(result).slideDown();, et dans ce cas, supprimes la mention dataType: 'json' dans la configuration de la requête ajax (ne mets rien jquery se débrouille tout seul).

Et le "fail" remplace le "error" (qui est déprécié dans la nouvelle syntaxe). Toufik83 t'as montré une manière d'exploiter ce retour d'erreur, il y en a d'autres, consultes la doc pour plus d'infos. Mais bon sans même savoir l'exploiter précisément, si tu tombes dans cette condition la plupart du temps c'est que le chemin vers le fichier php n'est pas bon. Ou sinon cela peut-être aussi que le script serveur a scratché, perte de connexion etc. mais à part ça, si php renvoie quelque chose, même une erreur de code, tu seras toujours dans la condition "done" (à condition que le dataType ne soit pas indiqué sinon une erreur de format te positionneras également dans la condition fail, cf message suivant).

**Toufik83** · 25/07/2021, 12h45

Bonjour,

Envoyé par ABCIWEB

... mais à part ça, si php renvoie quelque chose, même une erreur de code, tu seras toujours dans la condition "done".

Les explications de ABCIWEB sont parfaites, sauf que dans ce cas on utilise dataType:"json" et donc ajax attend un objet json en retour, et si jamais une erreur de code est déclenchée son contenu n'est pas du json mais un texte, donc ajax exécutera directement le code de fail et pas celui de done.

**ABCIWEB** · 25/07/2021, 18h22

Oui effectivement c'est une correction utile, dans mon dernier paragraphe je raisonnais comme si le dataType n'était pas indiqué, ce qui est pratique pour renvoyer différents formats (JSON, html ou une chaine de texte) depuis le même fichier. Mais s'il est indiqué (et c'est le cas ici) les erreurs php vont se retrouver dans le fail pour cause de mauvais format retourné, merci pour cette précision, j'ai corrigé mon message en ce sens.

**clickandgo** · 26/07/2021, 15h39

Bonjour à vous 2

J'ai pas mal avancé mais il reste des sérieux blocages :

1/ J'ai tenté de déplacer le code PHP contenu dans le formulaire d'inscription dans un nouveau fichier PHP et de faire un require_once : il ne reconnaît pas le path du require 1 fois sur deux ...
2/ Même en gardant le code dans le formulaire, une erreur indiquant qu'il ne trouve pas la classe User apparaît : c'est nouveau, surtout que la classe est bien proposée partout dans le code et même dans VSC et que je n'avais aucun problème à ce niveau !
3/ Le serializeArray renvoie un tableau vide malgré que mes champs aient tous des 'ID' et 'Name'. Je ne peux donc pas l'exploiter pour l'instant...

En dehors de cela, j'arrive à envoyer une XHR avec les données et j'ai bien le retour PHP en console du navigateur (sacré progrès

), malheureusement ça bloque au moment de l'enregistrement des données car la classe User n'est plus détectée en php d'où STOP avant enregistrement...

J'ai viré l'ancienne condition

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ($_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST['registration-btn']))

car il me semble que c'était cela qui détenait le code depuis Ajax vu qu'il lui était impossible de savoir si le bouton en question avait été pressé en PHP (dites moi si je me trompe)...

Donc il y a du progrès mais j'attends quand même vos lanternes

Merci

**ABCIWEB** · 26/07/2021, 16h20

Faudrait que tu comprennes mieux les exemples que l'on te donne avant de faire ton code. Dans une page séparée (vide) copies le code de cet exemple. Remplaces juste l'adresse de la requête ajax "./includes/registrationForm.php", par "traitement_ajax.php". Ensuite tu crées un nouveau fichier que tu nommes "traitement_ajax.php" et dans lequel tu mettras dans un premier temps uniquement: <?php echo json_encode($_POST);?> et poses ce fichier dans le même répertoire que le fichier du formulaire. Tu pourras voir le retour de la requête depuis la console du navigateur dans l'onglet "reseau".

Travailles à partir de cet exemple puis complète ton code. C'est dans le code du fichier "traitement_ajax.php" que tu peux récupérer tes variables $_POST, faire tes enregistrements et renvoyer quelque chose vers le formulaire.

**clickandgo** · 26/07/2021, 18h30

Bonjour ABCIWEB

Je crois que tu m'as mal compris :

Je sais déporter un code PHP de traitement vers une page à part et dans le cas présent comme je le mentionnais j'avais un retour de la requête Ajax correct lorsque externe au formulaire mais mon problème actuel est que ma classe User n'est plus reconnue tant en mettant le code à l’extérieur ou en le réintégrant dans la page du formulaire ...

Cela serait il causé par des liens invisibles brisés par VSC (à force de déplacer le code) ?

J'ai jamais eu ce problème avant et je déportais toujours le code de processing en externe d'un formulaire...

**Toufik83** · 26/07/2021, 19h12

Bonjour,

Il faut que tu comprennes la différence entre une soumission classique et une soumission via ajax.

1-Lorsque tu soumets un formulaire via AJAX, tu n'as pas besoin de vérifier le $_POST["registration-btn"], car le "name" du bouton n'est pas envoyé dans la propriété data:{...} d'ajax, alors que PHP ne reconnait que les variables qui ont été envoyées par la propriété data d'ajax.

2- Cette ligne $newUser = new User(); instancie un nouveau objet User, par contre il n'y a aucun require_once dans ton fichier php.

Ajoutes un require_once("chemin vers la classe User par rapport au fichier php"); ou require("....") au début du fichier PHP, après tu peux instancier tranquillement ton objet.

Remarque : j'ai fais un teste de ton exemple , et serializeArray récupère les valeurs correctement...

**clickandgo** · 27/07/2021, 12h32

Merci Toufik83

Tout fonctionne à merveille ! : le problème venait d'une erreur dans le chemin de mon require_once, en fait je devais en appeler 2 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
require_once('../app/Model.php');
require_once('../models/User.php');

Qui comme tu le vois ne sont pas résidants dans le même dossier (je suis en MVC), pas étonnant que les requêtes ajax me renvoyaient une erreur puisqu’au moment de faire les vérifs côté PHP dépendantes de la classe en question les require étaient faux !

Ouf ! je suis soulagé, un grand merci à vous deux !!!!

**clickandgo** · 27/07/2021, 14h10

Je reviens sur le sujet car je me rends compte que si j'utilise 'form.serializeArray()' je tombe toujours sur un tableau vide, en décrivant les champs par contre tout marche parfaitement...

Il y a donc un problème chez moi ...

**Toufik83** · 27/07/2021, 14h24

Bonjour,

Normalement serializeArray() retourne les valeurs sans aucun souci, à mois qu'il y'a un autre problème quelque part dans ton code...

Sinon, et si tu ne veux pas utiliser serializeArray(), il est toujours possible de remplir manuellement les données que tu veux envoyer au fichier PHP dans la propriété data :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 var userName = $('#userName').val()
 ,userPassword = $('#userPassword').val()
 ,confirmUserPassword = $('#confirmUserPassword').val()
 ,userPhone = $('#userPhone').val()
 ,userEmail = $('#userEmail').val();
$.ajax({
  url:"...",
  method:"post",
  data:{"userName":userName,"userPassword":userPassword,"confirmUserPassword ":confirmUserPassword ,"userPhone":userPhone,"userEmail":userEmail }
})
.done(function(data){
  //code done...
})
.fail(function(err){
  //code erreurs...
});

**clickandgo** · 27/07/2021, 15h23

Merci Toufik83

C'est ce que je faisais ... à l'ancienne ... mais j'aurai voulu savoir pourquoi serialize ne fonctionne pas alors que mes champs ont tous des "id" et des "name"...

**ABCIWEB** · 27/07/2021, 21h25

Salut,

Comment vois-tu vu que cela ne fonctionne pas ? Quand je teste ton code ici (en ayant supprimé la clause "error" qui est maintenant obsolète), serializeArray() récupère correctement les données.

Donc soit c'est la vérification que tu ne sais pas faire, soit tu appliques serializeArray() sur une variable qui ne représente pas le formulaire, ou encore tu n'as aucun champ dans ton formulaire. Donnes-nous un exemple de code dans lequel il ne fonctionne pas si tu veux que l'on comprenne où est ton erreur, mais en tous cas dans l'exemple que tu donnes dans le lien ci-dessus, il fonctionne correctement.

Au passage pour info, les id ne servent à rien pour récupérer des données à l'intérieur d'un formulaire. Seul l'attribut "name" est indispensable.

**clickandgo** · 28/07/2021, 10h39

Bonjour à vous deux

Ravi de voir que le serialize fonctionne chez vous ... Malheureusement vaudrait mieux que cela fonctionne chez moi

!!!...

Comme dit précédemment, si je remplace la liste des champs nommés du [data:] d' Ajax par un serializeArray() en ayant au préalable déclaré var data= form.serializeArray() la réponse me signale la liste de tous les champs comme étant 'undefined' pourtant, ils ont tous bien un "name" et sont bien reconnus si je change de méthode pour une liste classique de champs de data.

Si je fais un console.log(data) aucun résultat n'apparaît d'ailleurs.

Je pense que mon problème vient d'ailleurs puisque en méthode classique tout fonctionne à merveille ...

D'autre part, je voudrais que le JSON de retour s'affiche sur plusieurs lignes avec saut de ligne :

J'ai bien la liste des validations erronées dans le champ 'userAlert' + le slideDown mais le message ne s’étend que sur une ligne continue et les caractères semblent non échappés même en forçant un JSON.parse() dessus (j'ai cru comprendre qu'il n'y a pas besoin de forcer normalement, mais bon, je teste ...)

check_registration.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
<?php
require_once('../app/Model.php');
require_once('../models/User.php');
//Vérification envoi du formulaire d'inscription
if (isset($_POST)) {
 
    $userName            = $_POST['userName'];
    $userPassword        = $_POST['userPassword'];
    $userEmail           = $_POST['userEmail'];
    $userPhone           = $_POST['userPhone'];
 
 
        //Variable pour contrôle valeurs de retour des fonctions externes
    $retour = array();
 
    //Instanciation de la classe / Modèle User
    $newUser = new User();
 
    //$userId = $newUser->$userId;  
 
    //Vérification si existence de l'utilisateur dans la table users
    if (isset($_POST['userName']) && !empty($_POST['userName'])) {
 
        $retour[] = $newUser->userNameCheck($userName);
    }
 
    //Vérification si existence de l'email utilisateur dans la table users
    if (isset($_POST['userEmail']) && !empty($_POST['userEmail'])) {
 
        $retour[] = $newUser->userEmailCheck($userEmail);
    }
 
    //On procède à l'enregistrement de l'utilisateur dans la table users si les tests précédents se sont réalisés correctement   
    //si le tableau de retour ne contient pas false alors on continue
    if (!in_array(false, $retour)) {
 
        //On crée le compte de l'utilisateur si aucune erreur
        $newUser->createUserAccount($userName, $userEmail, $userPassword, $userPhone);
    }
} else {
    echo ("Une erreur est survenue pendant la soumission du formulaire.");
}

registrationForm.js fonctionnant sans le serializeArray() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
$(function () {
 
    var form = $('#registrationForm');
 
    var userName = form.find('#userName')
    var userPhone = form.find('#userPhone')
    var userEmail = form.find('#userEmail')
    var userPassword = form.find('#userPassword');
    var confirmUserPassword = form.find('#confirmUserPassword');
 
    var userAlert = form.find('#userAlert');
 
    // Comportement onkeyup du champ confirmUserPassword
    confirmUserPassword.on("keyup", function () {
        // Bord rouge tant que le champ n'est pas égal au précédent, bord vert si égalité
        userPassword.val() != $(this).val() ? $(this).css('border', '2px solid red') : $(this).css('border', '2px solid green');
        //Pour fermer le message d'alerte dès que l'on change le mot de passe s'il est trop court ou ne correspond pas à userPassword
        userAlert.slideUp()
    });
 
    // Pour fermer le message d'alerte dès que l'on change le mot de passe s'il est trop court
    userPassword.on("keyup", function () {
        userAlert.slideUp();
    });
 
    // Soumission du formulaire
    form.on("submit", function (e) {
 
        // Supprime le comportement par défaut pour être envoyé via Ajax
        e.preventDefault();
        e.stopPropagation();
 
        // Contrôle l'égalité des password
        if (userPassword.val() != confirmUserPassword.val()) {
            userAlert.text("Les deux mots de passe renseignés ne correspondent pas. Veuillez corriger!").slideDown();
            return false;
        }
        // Contrôle la longueur minimum du password
        else if (userPassword.val().length < 6) {
            userAlert.text("Le mot de passe doit être composé de six caractères minimum. Veuillez corriger!").slideDown();
            return false;
        }
        // Si tout est ok on soumet le formulaire
        else {
 
            //var data = form.serializeArray(); //serializeArray() récupère tous les champs du formulaire 
            //alert($(this).serializeArray())
 
            $.ajax({
                type: "POST",
                url: "../functions/check_registration.php",
                data: {
                    userName: userName.val(),
                    userPassword: userPassword.val(),
                    userPhone: userPhone.val(),
                    userEmail: userEmail.val()
                },
                dataType: 'text'
 
            }).done(function (result) {
                //message.css('color', 'green').text("Vous êtes enregistré !").slideDown();
                // Normalement le script php devrait lui-même renvoyer le message de confirmation et donc ce serait :
 
                userAlert.css('color', 'green').text(result).slideDown();
 
            }).fail(function () {
                // Principalement pour debug durant le développement si la destination de la requête ajax n'est pas bonne 
                userAlert.text("La requête Ajax n'a pas abouti").slideDown();
            })
        }
    })
})

**Toufik83** · 28/07/2021, 17h15

Bonjour,

Et le code HTML ? toujours le même que celui du début de la discussion ?

**ABCIWEB** · 29/07/2021, 00h09

Salut,

Comme l'a dit Toufik83 cela ne sert à rien de nous montrer un code javascript de requête Ajax sans nous montrer le formulaire et le html correspondant.

Pour le reste concernant le code php du fichier "check_registration.php", cela ne sert à rien de faire if (isset($_POST)) car la super globale "$_POST" est toujours définie donc cette condition retournera toujours "true" même si aucun formulaire est envoyé. Fais plutôt if(!empty($_POST)). Après si tu veux être certain que le $_POST reçu provienne de ton formulaire il faut utiliser un token.

**clickandgo** · 29/07/2021, 10h42

Voici le code des 3 fichiers en question dans l'état actuel

Une fonction de contrôle dynamique de la frappe dans le champ password a été rajoutée et est pleinement fonctionnelle (elle sera externalisée et fignolée plus tard)...

Ce qui me préoccupe maintenant c'est de pouvoir avoir les sauts de ligne dans le champ [userAlert] qui correspond à l'affichage de la liste des erreurs de validation retournées par Ajax/PHP.
Je ne sais pas si mettre le type de data en JSON, HTML ou autre, du côté PHP vous verrez que j'ai tenté d'encoder la réponse en JSON mais j'ai une succession de caractères erronés partout où il y a des accents et pas de saut de ligne.

J'ai cru comprendre qu'il n'y a pas besoin de faire un Parse ou Decode côté Ajax...

Pour le reste, tout est fonctionnel ...

Un grand merci pour votre aide

registrationForm.php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
<div id="registrationForm" name="registrationForm" class="modal">
 
    <form class="modal-content animate" name="registrationForm" action="#" method="POST">
 
        <div class=form-header>
            <h1 class="form-title">Formulaire d'inscription</h1>
            <span onclick="document.getElementById('registrationForm').style.display='none'" class="close" title="Fermer ce formulaire">&times;</span>
        </div>
 
        <div class="field input">
            <label for="userName"><b> Nom d'utilisateur</b></label>
            <input type="text" placeholder="Votre Pseudo ou votre nom d'utilisateur" name="userName" id="userName" required>           
        </div>
 
        <div class="field input">
            <label for="userEmail"><b>Mail</b></label>
            <input type="email" placeholder="Votre mail principal" name="userEmail" id="userEmail" required>            
        </div>
 
 
        <div class="field input">
            <label for="userPassword"><b>Mot de passe</b></label>
            <input class="password" type="password" placeholder="Votre mot de passe" name="userPassword" id="userPassword" required>
            <i class="fas fa-eye"></i>
            <ul class="password-check-msg">
                <li id="taille-mdp"></li>
                <li id="min-mdp"></li>
                <li id="maj-mdp"></li>
                <li id="chiffre-mdp"></li>
            </ul>
        </div>
 
        <div class="field input">
            <label for="confirmUserPassword"><b>Confirmer le mot de passe</b></label>
            <input class="password" type="password" placeholder="Votre mot de passe" name="confirmUserPassword" id="confirmUserPassword" required>
            <i class="fas fa-eye"></i>           
        </div>
 
        <div class="field input">
            <label for="userPhone"><b>Telephone principal(facultatif)</b></label>
            <input type="text" placeholder="Votre telephone principal" name="userPhone" id="userPhone">           
        </div>
 
        <p class="userAlert" id="userAlert" style="display:none;color:red;font-family:Verdana, Geneva, sans-serif"></p>
        <button type="submit" name="registration-btn" id="registration-btn">S'inscrire</button>
 
 
        <div class="form-footer" style="background-color:#f1f1f1">
            <button type="button" onclick="document.getElementById('registrationForm').style.display='none'" class="cancelbtn">Annuler et fermer</button>
        </div>
    </form>
</div>

check_registration.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
 
<?php
require_once('../app/Model.php');
require_once('../models/User.php');
//Vérification envoi du formulaire d'inscription
if (!empty($_POST)) {
 
    $userName            = $_POST['userName'];
    $userPassword        = $_POST['userPassword'];
    $userEmail           = $_POST['userEmail'];
    $userPhone           = $_POST['userPhone'];
 
 
        //Variable pour contrôle valeurs de retour des fonctions externes
    $retour = array();
 
    //Instanciation de la classe / Modèle User
    $newUser = new User();
 
    //$userId = $newUser->$userId;  
 
    //Vérification si existence de l'utilisateur dans la table users
    if (isset($_POST['userName']) && !empty($_POST['userName'])) {
 
        $retour[] = $newUser->userNameCheck($userName);
    }
 
    //Vérification si existence de l'email utilisateur dans la table users
    if (isset($_POST['userEmail']) && !empty($_POST['userEmail'])) {
 
        $retour[] = $newUser->userEmailCheck($userEmail);
    }
 
    //On procède à l'enregistrement de l'utilisateur dans la table users si les tests précédents se sont réalisés correctement   
    //si le tableau de retour ne contient pas false alors on continue
    if (!in_array(false, $retour)) {
 
        //On crée le compte de l'utilisateur si aucune erreur
        $newUser->createUserAccount($userName, $userEmail, $userPassword, $userPhone);
    }
} else {
    echo ("Une erreur est survenue pendant la soumission du formulaire.");
}

registrationForm.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
$(function () {
 
    var form = $('#registrationForm');
 
    var userName = form.find('#userName')
    var userPhone = form.find('#userPhone')
    var userEmail = form.find('#userEmail')
    var userPassword = form.find('#userPassword');
    var confirmUserPassword = form.find('#confirmUserPassword');
 
    var userAlert = form.find('#userAlert');
    var checkPasswordAllValid = 0
 
    // Comportement onkeyup du champ confirmUserPassword
    confirmUserPassword.on("keyup", function () {
        // Bord rouge tant que le champ n'est pas égal au précédent, bord vert si égalité
        userPassword.val() != $(this).val() ? $(this).css('border', '2px solid red') : $(this).css('border', '2px solid green');
        //Pour fermer le message d'alerte dès que l'on change le mot de passe s'il est trop court ou ne correspond pas à userPassword
        userAlert.slideUp()
    });
 
    // Pour fermer le message d'alerte dès que l'on change le mot de passe s'il est trop court
    userPassword.on("keyup", function () {
 
        //Si la valeur n'est pas vide
        if ($(this).val() != "") {
            let taille = $("#taille-mdp");
            taille.children().remove();
            taille.text("");
            let min = $("#min-mdp");
            min.children().remove();
            min.text("");
            let maj = $("#maj-mdp");
            maj.children().remove();
            maj.text("");
            let digit = $("#chiffre-mdp");
            digit.children().remove();
            digit.text("");
 
            //Vérifie qu'il y a au moins 8 caractères
            if (/^(.{8,})/.test($(this).val())) {
                taille.css('color', 'green')
                taille.append('<i class="fas fa-check-circle" style="color:green;"></i> Au moins 8 caractères. (' + $(this).val().length + '/8)');
                checkPasswordAllValid++
 
            } else {
                taille.css('color', 'red')
                taille.append('<i class="fas fa-times-circle"style="color:#d9534f;"></i> Au moins 8 caractères. (' + $(this).val().length + '/8)');
                checkPasswordAllValid = 0
 
            }
            //Vérification du chiffre
            if (/^(?=.*\d)/.test($(this).val())) {
                digit.css('color', 'green')
                digit.append('<i class="fas fa-check-circle" style="color:green;"></i> Au moins 1 chiffre.');
                checkPasswordAllValid++
            } else {
                digit.css('color', 'red')
                digit.append('<i class="fas fa-times-circle" style="color:#d9534f;"></i> Au moins 1 chiffre.');
                checkPasswordAllValid = 0
            }
            //Vérification de la minuscule
            if (/^(?=.*[a-z])/.test($(this).val())) {
                min.css('color', 'green')
                min.append('<i class="fas fa-check-circle" style="color:green;"></i> Au moins 1 caractère en minuscule.');
                checkPasswordAllValid++
 
            } else {
                min.append('<i class="fas fa-times-circle" style="color:#d9534f;"></i> Au moins 1 caractère en minuscule.');
                min.css('color', 'red')
                checkPasswordAllValid = 0
            }
            //Vérification de la majuscule
            if (/^(?=.*[A-Z])/.test($(this).val())) {
                maj.css('color', 'green')
                maj.append('<i class="fas fa-check-circle" style="color:green;"></i> Au moins 1 caractère en majuscule.');
                checkPasswordAllValid++
 
            } else {
                maj.css('color', 'red')
                maj.append('<i class="fas fa-times-circle" style="color:#d9534f;"></i> Au moins 1 caractère en majuscule.');
                checkPasswordAllValid = 0
            }
        }
 
        userAlert.slideUp();
        console.log(checkPasswordAllValid)
 
    });
    userPhone.on("keyup", function () {
        validatePhone(userPhone)
    })
    //Fonction qui valide le telephone
    function validatePhone(userPhone) {
 
        if (userPhone.val() == '' || !userPhone.val().match(/^0[1-9]([-. ]?[0-9]{2}){4}$/)) {
            userPhone.css({
                'background': '#FFEDEF',
                'border': 'solid 1px red'
            })
            return false
        } else {
            userPhone.css({
                'background': '#99FF99',
                'border': 'solid 1px #99FF99'
            })
            return true
        }
    }
 
 
    // Soumission du formulaire
    form.on("submit", function (e) {
 
        // Supprime le comportement par défaut pour être envoyé via Ajax
        e.preventDefault();
        e.stopPropagation();
 
        // Contrôle l'égalité des password
        if (userPassword.val() != confirmUserPassword.val()) {
            userAlert.text("Les deux mots de passe renseignés ne correspondent pas. Veuillez corriger!").slideDown();
            return false;
        }
        // Contrôle la longueur minimum du password
        else if (userPassword.val().length < 6) {
            userAlert.text("Le mot de passe doit être composé de six caractères minimum. Veuillez corriger!").slideDown();
            return false;
        }
        // Si tout est ok on soumet le formulaire
        else {
 
            //var data = form.serializeArray(); //serializeArray() récupère tous les champs du formulaire 
            //alert($(this).serializeArray())
 
            $.ajax({
                type: "POST",
                url: "../functions/check_registration.php",
                data: {
                    userName: userName.val(),
                    userPassword: userPassword.val(),
                    userPhone: userPhone.val(),
                    userEmail: userEmail.val()
                },
                dataType: 'text'
 
            }).done(function (result) {
                //message.css('color', 'green').text("Vous êtes enregistré !").slideDown();
                // Normalement le script php devrait lui-même renvoyer le message de confirmation et donc ce serait :
 
                userAlert.css('color', 'green').text(result).slideDown();
 
            }).fail(function () {
                // Principalement pour debug durant le développement si la destination de la requête ajax n'est pas bonne 
                userAlert.text("La requête Ajax n'a pas abouti").slideDown();
            })
        }
    })
})

Vérifier concordance passwords au fur et à mesure de la saisie

jQuery

Discussions similaires

Partager

Partager