Votre site internet comporte un espace utilisateur ? Actuellement, il faut cliquer sur le bouton de connexion pour voir si le mot de passe est au bon format ou non ? Vous souhaitez que cela s’affiche en direct au fur et à mesure que l’utilisateur saisi son mot de passe afin de lui faciliter la vie ? Vous êtes sur le bon tutoriel !

L’objectif de cet article, et que vous soyez capable, à la fin, d’indiquer à l’utilisateur si le format de son mot de passe est correct ou pas avant qu’il ne clique sur le bouton valider.

Ici, nous demanderons un mot de passe avec au moins 8 caractères, au moins une majuscule et une minuscule, ainsi qu’avec au moins un caractère spécial.

Éléments visuels de base

Nous aurons donc besoin de :

• un champ mot de passe,
• une fenêtre avec les informations, qui s’affiche lorsque le champ est focus, c’est-à-dire quand l’utilisateur l’a activé pour saisir des données,
• un bloc qui regroupe ces deux éléments, pour pouvoir les positionner de façon propre.

Voici un exemple complet pour la mise en place des éléments de base.

Gérer la validité du mot de passe

Maintenant que les bases sont placées, nous allons pouvoir passer au JavaScript. Le tout sera réalisé avec jQuery.

Nous allons créer une fonction qui va gérer la validité du mot de passe. Cette fonction sera appelée à chaque fois que l’utilisateur saisie ou supprime un caractère dans le champ.

const checkPassword = function() { ... }

Pour le moment, pas de tests, seulement une simulation de la validité. Nous aurons une variable good qui contient une boolean servant à indiquer si le mot de passe est valide ou non.

let good = false

Quand un test a déjà été effectué, le champ sera affiché avec des bordures vertes ou rouge, grâce aux classes valid et error. Il faudra donc penser à réinitialiser cette donnée à chaque test.

$('#password')
  .removeClass('valid')
  .removeClass('error')

Maintenant, nous allons traiter le mot de passe. Pour cela, il faut commencer par le récupérer.

let password = $('#password').val()

Enfin gérer à la fois la couleur du champ et l’affichage du bouton de connexion. Pour ce faire, nous allons nous baser sur la variable good. Elle sera modifiée progressivement en fonction des tests, mais nous reviendrons là-dessus après. Donc, si le mot de passe est valide, donc que good est à true, le champ deviendra vert et le bouton de connexion s’affichera. Dans le cas inverse, si good est à false, le champ passera en rouge et le bouton sera masqué.

if( good ) {
  $('#password').addClass('valid')
  $('#connect').show()
}
else {
  if( password.length > 0 ) {
    $('#password').addClass('error')
  }
  $('#connect').hide()
}

La fonction est prête. Il va maintenant falloir l’appeler à deux moments :

• Au chargement de la page, pour gérer un éventuel mot de passe sauvegardé temporairement (même si pour des raisons de sécurité les navigateurs ne sont pas censé le faire),
• Dès que l’utilise modifie le champ, grâce à l’événement input.

$(function() {
  checkPassword()
  $('#password').on('input', checkPassword)
})

Dans cet exemple, vous pouvez modifier la variable good (ligne 3) pour constater le changement de comportement.

Tests sur le mot de passe

Maintenant que la gestion de la validée du mot de passe est faite et que le résultat des tests est simulé, nous allons pouvoir passer aux tests eux-même.

Souvenez-vous de la variable good. Elle va devenir le fil-rouge des tests. Nous allons la rendre valide dès le début (true), puis faire tous les tests dans l’ordre et l’invalide dès qu’un test est refusé. C’est la méthode la plus optimisée pour gérer une série de tests.

Les tests de façon général

De manière très général, chaque test ressemblera au précédent et suivra une logique :

• Si le test est valide :
  • Alors, l’indication dans la fenêtre d’aide passe du rouge au vert.
• Sinon :
  • L’indication dans la fenêtre d’aide passe du vert au rouge.
  • La variable good passe à false (test invalidés)/

if( /*Test ici*/ ) {
  $( /*selecteur_aide*/ ).removeClass('error').addClass('valid')
}
else {
  $( /*selecteur_aide*/ ).removeClass('valid').addClass('error')
  good = false
}

Si c’est ok pour vous alors c’est parti.

Longueur du mot de passe

Pas de regEx ici, on vérifie tout simplement que le mot passe comporte au moins 8 caractères.

password.length >= 8

if( password.length >= 8 ) {
  $('#password-alert-length').removeClass('error').addClass('valid')
}
else {
  $('#password-alert-length').removeClass('valid').addClass('error')
  good = false
}

La majuscule

Le test suivant consiste à vérifier que le mot de passe contienne au moins une majuscule, comprise entre A et Z. Attention, pas de flag i, car on doit gérer la casse.

if( /[A-Z]/.test(password) ) {
  $('#password-alert-upper').removeClass('error').addClass('valid')
}
else {
  $('#password-alert-upper').removeClass('valid').addClass('error')
  good = false
}

La minuscule

Même chose pour la majuscule, mais avoir une minuscule (en respectant la casse) cette fois.

if( /[a-z]/.test(password) ) {
  $('#password-alert-lower').removeClass('error').addClass('valid')
}
else {
  $('#password-alert-lower').removeClass('valid').addClass('error')
  good = false
}

Le chiffre

if( /[1-9]/.test(password) ) {
  $('#password-alert-number').removeClass('error').addClass('valid')
}
else {
  $('#password-alert-number').removeClass('valid').addClass('error')
  good = false
}

Le caractère spécial

if( /[&#-_|!?]/.test(password) ) {
  $('#password-alert-special').removeClass('error').addClass('valid')
}
else {
  $('#password-alert-special').removeClass('valid').addClass('error')
  good = false
}

Résultat final

Vous pouvez retrouver le code complet et le tester avec cet exemple.

Notre astuce pour afficher les éléments à ajouter à un mot de passe

Vous savez à présent comment afficher à l’utiliser les éléments qu’il doit indiquer dans son mot de passe, avec des codes couleurs mis à jour en direct. Il ne tient qu’à vous à présent d’adapter les tests pour votre site internet.

Si la tâche est trop ardue, n’hésitez pas à demander de l’aide auprès d’un développeur jQuery sur Codeur.com. Le dépôt d’annonce est gratuit et vous recevrez rapidement de nombreuses candidatures pour réaliser votre projet.