IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

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


Sujet :

jQuery

  1. #21
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 405
    Points : 4 841
    Points
    4 841
    Par défaut
    Bonjour,

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div id="registrationForm" name="registrationForm" class="modal">
        <form class="modal-content animate" name="registrationForm" action="#" method="POST">

    C'est normal que serializeArray te retourne un tableau vide, parce que le id "registrationForm" est attribué au div parent et pas au form !

    Correction :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div class="modal">
        <form id="registrationForm" name="registrationForm"  class="modal-content animate" action="#" method="POST">
            ...
        </form>
    </div>

    Citation Envoyé par clickandgo Voir le message
    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.
    l'utilisation de JSON est très utile, ça te permet de récupérer plusieurs variables depuis le fichier PHP, puis tu n'as qu'a parcourir le résultat avec un $.each afin de l'exploiter en js, mais pour que cela fonctionne il faut remettre dataType:"json" que tu as supprimé et ajouter un json_encode($retour) tout à la fin du fichier 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
    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["userNameCheck"] = $newUser->userNameCheck($userName);
        }
     
        //Vérification si existence de l'email utilisateur dans la table users
        if (isset($_POST['userEmail']) && !empty($_POST['userEmail'])) {
     
            $retour["userEmailCheck"] = $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["userNameCheck"],$retour["userEmailCheck"]])) {
     
            //On crée le compte de l'utilisateur si aucune erreur
            $newUser->createUserAccount($userName, $userEmail, $userPassword, $userPhone);
        }
    } else {
        $retour['erreur']="Une erreur est survenue pendant la soumission du formulaire.";
    }
    echo json_encode($retour);

    Au lieu d'ajouter seulement des valeurs au tableau $retour, pourquoi ne pas préciser des indexes pour les identifier ? $retour["userNameCheck"] = $newUser->userNameCheck($userName); et $retour["userEmailCheck"] = $newUser->userEmailCheck($userEmail); et $retour['erreur']="Une erreur est survenue pendant la soumission du formulaire.";
    Puis dans le done de js, tu n'as qu'a mettre un console.log("done :",result); et parcourir le résultat avec $.each :
    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
    $.ajax({
            method: "POST",
            url: "../functions/check_registration.php",
            data: form.serializeArray(),
            dataType: 'json'
    })
    .done(function (result) {
          console.log("done :",result);//voir ce que ça donne au console !
          $.each(result,function(key,value){//pour chaque item dans result
               userAlert.append("<p>"+value+"</p>");
          });
          userAlert.css('color', 'green').slideDown();
     
    })
    .fail(function (err) {
          userAlert.text("La requête Ajax n'a pas abouti !"+err.responseText).slideDown();
    })

  2. #22
    Membre actif
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    1 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 1 092
    Points : 268
    Points
    268
    Par défaut
    Merci Toufik83 pour ta réponse cependant ce n'est pas si simple :

    1/ La variable $retour n'est pas la variable qui retourne le code d'erreur mais celle qui fait le checking pour la progression de la validation avec des false/true

    2/ Les contrôles sont effectués en amont dans mon modèle [models] et la classe [USER] voir le code plus bas :

    3/ J'ai bien une réponse en console mais le texte n'est pas échappé :

    " - Ce nom d'utilisateur existe d\u00e9j\u00e0 dans notre base, veuillez en choisir un autre."
    " - Cet email existe d\u00e9j\u00e0 dans notre base , veuillez en s\u00e9lectionner un autre."

    J'ai bien le saut de ligne par contre ...

    4/Curieusement, malgré une réponse correcte j'ai maintenant aussi "La requête Ajax n'a pas abouti" j'ai du oublier quelque chose dans le code JS...

    //..models>User.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
    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
    <?php
    class User extends Model
    {
        public $idName;
        public $errors = [];
     
        public function __construct()
        {
            $this->table = "users";
            $this->idName = "userId";
            //$this->userName = "userName";
            $this->getConn();
        }
     
        public function userNameCheck(string $userName)
        //On vérifie si le nom d'utilisateur existe dans la table users et on renvoie
        //le résultat
        {
            $userName = strip_tags($userName);
     
            $sql = 'SELECT userName 
                    FROM ' . $this->table .
                ' WHERE userName = :userName';
     
            $qry = $this->_connexion->prepare($sql);
            $qry->bindValue(':userName', $userName, PDO::PARAM_STR);
            $qry->execute();
            $result = $qry->rowCount();
     
            if ($result == 0) {
                return true;
            } else {
                echo json_encode($errors[] = " - Ce nom d'utilisateur existe déjà dans notre base, veuillez en choisir un autre.") . '<br>';
                return false;
            }
        }
     
        public function userEmailCheck(string $userEmail)
        {
            $userEmail = strip_tags($userEmail);
     
            $sql = 'SELECT userEmail 
                    FROM ' . $this->table .
                ' WHERE userEmail = :userEmail';
     
            $qry = $this->_connexion->prepare($sql);
            $qry->bindValue(':userEmail', $userEmail, PDO::PARAM_STR);
            $qry->execute();
            $result = $qry->rowCount();
     
            //On vérifie si le mail de l'utilisateur existe déjà dans la table users et on renvoie
            //le résultat
            if ($result == 0) {
                return true;
            } else {
                echo json_encode($errors[] = " - Cet email existe déjà dans notre base , veuillez en sélectionner un autre.") . '<br>';
                return false;
            }
            //Vérification si l'email est valide
            if (!filter_var($userEmail, FILTER_VALIDATE_EMAIL)) {
                echo json_encode($errors[] = " - Cet email semble invalide, veuillez vérifier que son format soit correct.") . '<br>';
                return false;
            }
        }
        public function userPasswordCheck(string $userName, string $userPassword)
        {
            $userName = strip_tags($userName);
            $userPassword = strip_tags($userPassword);
     
            $sql = 'SELECT userName , userPassword 
                    FROM ' . $this->table .
                ' WHERE userName = :userName 
                AND userPassword = :userPassword';
     
            $qry = $this->_connexion->prepare($sql);
            $qry->bindValue(':userName', $userName, PDO::PARAM_STR);
            $qry->bindValue(':userPassword', $userPassword, PDO::PARAM_STR);
            $qry->execute();
            $result = $qry->rowCount();
     
            if ($result == 0) {
                echo json_encode($errors[] = " - Le mot de passe spécifié n'est pas reconnu, veuillez vérifier votre frappe.") . '<br>';
                return false;
            } else {
                return true;
            }
        }
        public function createUserAccount(string $userName, string $userEmail, $userPassword, string $userPhone)
        {
            $userName = strip_tags($userName);
            $userPassword = strip_tags($userPassword);
            //On crypte le mot de passe avant envoi au serveur
            $userPasswordCrypted = password_hash($_POST['userPassword'], PASSWORD_ARGON2ID);
            $userPhone = strip_tags($userPhone);
            $userEmail = strip_tags($userEmail);
            $idName = "userId";
     
            $sql = "INSERT INTO users (userName,userEmail,userPhone,userPassword,userRole)
                        VALUES(:userName,:userEmail,:userPhone,:userPassword,'user')";
     
            $qry = $this->_connexion->prepare($sql);
            $qry->bindValue(':userName', $userName, PDO::PARAM_STR);
            $qry->bindValue(':userEmail', $userEmail, PDO::PARAM_STR);
            $qry->bindValue(':userPhone', $userPhone, PDO::PARAM_STR);
            $qry->bindValue(':userPassword', $userPasswordCrypted, PDO::PARAM_STR);
     
            $result = $qry->execute();
     
            if ($result) {
                //$userId = $this->_connexion->lastInsertId($idName);
     
                echo ('Création de nouvel utilisateur réussie !');
            } else {
                echo ('La création du nouvel utilisateur a échoué.');
            }
        }
    }

    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
    159
    160
    $(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: '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 :
                    //$.each(function () {
                    userAlert.text(result)
                    userAlert.css('color', 'green').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();
                })
            }
        })
    })

  3. #23
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 405
    Points : 4 841
    Points
    4 841
    Par défaut
    Bonjour,

    Je sais que $retour est un tableau global utilisé dans le fichier PHP dans lequel tu enregistres toutes les informations dont tu as besoin (les erreurs + les messages de succès), mais le problème c'est que tu mets des "echo" dans les fonctions PHP, comme par exemple le code de la méthode userNameCheck(string $userName) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    echo json_encode($errors[] = " - Ce nom d'utilisateur existe déjà dans notre base, veuillez en choisir un autre.") . '<br>';
    .

    Cette ligne n'a aucun sens, à ta place je ferais en sorte que la méthode retourne une valeur avec return et pas echo :
    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
     
    <?php 
    ....
    public function userNameCheck(string $userName)
        //On vérifie si le nom d'utilisateur existe dans la table users et on renvoie
        //le résultat
        {
            $userName = strip_tags($userName);
     
            $sql = 'SELECT userName 
                    FROM ' . $this->table .
                ' WHERE userName = :userName';
     
            $qry = $this->_connexion->prepare($sql);
            $qry->bindValue(':userName', $userName, PDO::PARAM_STR);
            $qry->execute();
            $result = $qry->rowCount();
            $rep=false;
            if ($result == 0) {
                $rep=true;
            } else {
                //$this->errors et pas seulement $errors !
                $this->errors[]="- Ce nom d'utilisateur existe déjà dans notre base, veuillez en choisir un autre.";
            }
            return $rep;
    }
    La même chose pour les autres méthodes....

    Comme ça, les méthodes retournent soit true soit false, et s'il y'a un message d'erreur dans $this->errors, il faudrait donc le récupérer (via une méthode getErrors()) et l'ajouter dans $retour['erreur'] du fichier php/ajax check_registration.php, par exemple pour la partie de userNameCheck() :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    if (isset($_POST['userName']) && !empty($_POST['userName'])) {
        $retour["userNameCheck"] = $newUser->userNameCheck($userName);
        if($retour["userNameCheck"]==false){ 
            //si jamais une erreur a été générée, on l'enregistre dans $retour["erreur"] : 
            $retour["erreur"][]=$newUser->getErrors();//ne pas oublier d'ajouter la méthode getErrors() dans la class User
        }
    }

    Après pour le fail, c'est la nième fois que tu supprimes le paramètre err , surtout qu'il est très utile pour identifier tes erreurs PHP.
    Je me demande pourquoi ?!
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    .fail(function (err) {
          // Le paramètre "err" est l'objet représentant la requête ajax, il contient surtout la propriété responseText qui enregistre les messages d'erreurs !
          userAlert.text("La requête Ajax n'a pas abouti, erreurs :"+err.responseText).slideDown();
    })
    Concernant l'encodage des caractères spéciaux, est-ce que tes fichiers sont bien encodés en UTF-8 et qu'un <meta charset="UTF-8" /> existe dans ta page html ?

  4. #24
    Membre actif
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    1 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 1 092
    Points : 268
    Points
    268
    Par défaut
    Bonjour à tous les deux

    Juste un grand merci, grâce à votre aide tout fonctionne nickel ! ...

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 2 PremièrePremière 12

Discussions similaires

  1. Réponses: 2
    Dernier message: 28/07/2013, 22h58
  2. [XL-2003] Recherche au fur et à mesure de la saisie
    Par stefan69 dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 14/01/2010, 16h50
  3. Filtrer la source d'un combo au fur et à mesure de la saisie
    Par modafine dans le forum VB 6 et antérieur
    Réponses: 3
    Dernier message: 24/11/2008, 17h42
  4. calcul au fur et à mesure de la saisie
    Par papimcha dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 29/04/2008, 14h27
  5. Réponses: 6
    Dernier message: 12/01/2008, 22h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo