Javascript: Vérifier la longueur d'un mot de passe

[Résolu/Fermé]
Signaler
Messages postés
679
Date d'inscription
samedi 6 octobre 2012
Statut
Membre
Dernière intervention
22 décembre 2020
-
Messages postés
11154
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
1 septembre 2021
-
Bonjour,

Je voudrais que, lorsque l'utilisateur sort du champ mot de passe de mon formulaire html, vérifier que la longueur du mot de passe est suffisante.
Si ce n'est pas le cas, on affiche un petit message assez discret sous le champ mot de passe (je ne veux pas de message alert). Ne connaissant que très peu le javascript, je ne sais pas comment faire.
J'ai fais ça pour l'instant:

<p style='width:300px;'>Mot de passe : (Entre 8 et 255 caractères) <input size='60px' type='password' name='mdp' onBlur='mdpchange()'></p>

Pour le code javascript, je ne sais pas.

Merci de votre aide.

10 réponses

Messages postés
11154
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
1 septembre 2021
261
Salut,

Tu as oublié le ; à la fin de la première ligne.

var longueur = $_POST['mdp'].lenght;


Ensuite tu crées un paragraphe ou un span à l'endroit où tu veux mettre le message d'erreur en lui donnant un id. Tu ne mets rien dedans.

<p id="message"></p>


Tu vérifies la longueur et si elle n'est pas bonne tu écris dans le paragraphe vide. Par exemple si tu veux minimum 8 caractères :

if(longueur < 8) {
    document.getElementById("message").innerHTML = "Attention le mot de passe n'est pas assez long, il doit faire 8 caractères minimum.";
}
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci


T'as variable s'appelle longeur tandis que ce que t'alerte s'appelle longueur, un u est donc en trop.

Pour ce qui est du petit message je n'ai pas vraiment les connaissances requises pour le faire
Messages postés
679
Date d'inscription
samedi 6 octobre 2012
Statut
Membre
Dernière intervention
22 décembre 2020
14
Bonjour,
ce n'est pas mieux avec
var longueur = document.getElementsByName("mdp").lenght
alert(longueur);

Un message s'affiche bien, mais il est écrit "Undefined" (indéfini), au lieu de la longueur du mot de passe.

length est mal écrit, tu as écrit lenght
Utilisateur anonyme
L'erreur vient de moi qui me suis tromper sur l'écriture au départ, excuse moi
Messages postés
679
Date d'inscription
samedi 6 octobre 2012
Statut
Membre
Dernière intervention
22 décembre 2020
14
Bonjour,

longueur est égal à 1 quelque soit la longueur du mot de passe...
Sinon, pour le message, ça marche parfaitement.
Messages postés
11154
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
1 septembre 2021
261
Ah mais je suis bête !

Je viens de comprendre, tu lances la fonction dès que l'utilisateur a cliqué ailleurs que dans le champ mot de passe, donc tu ne peux pas récupérer ce qui est dans le champ avec $_POST[''] puisqu'il n'est pas posté, d'ailleurs de toute manière tu ne pourrais pas car JavaScript ne peut pas accéder aux variables globales !

Donc dans ta fonction tu dois "lire" le contenu du input, pour ça tu vas lui donner un ID : (je remets le code avec les balises de style dans le HTML comme toi mais il ne faut pas faire ça, utilises le CSS pour séparer le fond et la forme).

<p style='width:300px;'>Mot de passe : (Entre 8 et 255 caractères) <input size='60px' type='password' name='mdp' id='mdp' onBlur='mdpchange()'></p>
<p id="message"></p>


Et dans la fonction JavaScript :

function mdpchange() {
    var mdp = document.getElementById("mdp").value; // tu récupères la valeur du mdp
    var longueur = mdp.lenght; // tu récupères la longueur
    // si la longueur n'est pas bonne tu affiches le message
    if(longueur < 8 || longueur > 255) {
        document.getElementById("message").innerHTML = "Attention le mot de passe n'est pas assez long, il doit faire 8 caractères minimum.";
        }
}
Messages postés
2511
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
1 septembre 2021
456
Salut,

Tu peux aussi utiliser la validation html5 (sans aucun code javascript) qui est désormais prise en compte par tous les navigateurs récents.

L'attribut pattern permet entre autre de définir un nombre de caractères minimum et maximum pour un input :
<input type="password" pattern=".{5,10}" required title="5 to 10 characters">


Bonne journée
Messages postés
11154
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
1 septembre 2021
261
Certes, mais il faut quand même aussi faire la vérification pour les navigateurs plus anciens malheureusement encore utilisés, et comme il voulait que le message s'affiche dès la fin de la saisie et non pas à la validation.
Messages postés
679
Date d'inscription
samedi 6 octobre 2012
Statut
Membre
Dernière intervention
22 décembre 2020
14
Tout d'abord, je ne sais pas pourquoi vous écrivez tous length avec ght à la fin.
Ensuite, merci, ça marche parfaitement bien.
Je mets le sujet en résolu.
Messages postés
11154
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
1 septembre 2021
261
Perso parce que en français y'a pas beaucoup de th ni de ht et que j'écris plus souvent "width" et que du coup mes doigts sont plus habitués au "th" que au "ht".

Mais super si ça marche !

Tu peux récuperer la longueur en faisant var longeur = $_POST['mdp'].lenght
Messages postés
679
Date d'inscription
samedi 6 octobre 2012
Statut
Membre
Dernière intervention
22 décembre 2020
14
Bonjour,

var longeur = $_POST['mdp'].lenght
alert(longueur);


ou

var longeur = document.getElementsByName("mdp").lenght
alert(longueur);


1. Rien ne se passe...
2. Cela ne répond pas à ma deuxième question: afficher un petit message en dessous de la zone de texte si la longueur n'est pas suffisante.

Merci de votre aide.