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.

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager