Alors, pour ceux qui n’ont rien compris au titre, je vais faire simple : un « pattern » c’est une expression de code (expression régulière) que vous créez et qui sert à vérifier si ce que l’on a entré dans le champs (ici pour un mail) est bien de la forme monmail@exemple.com (par exemple).
Le code est le suivant : https://jsfiddle.net/cgh7ndup/
On crée un objet de type champs (« input ») qui est lui-même de type email (« type=email ») que l’on nomme email (« name=email ») sur lequel on inscrit un exemple de ce que l’on attend (« placeholder= ex: mail@monmail.com ») et qui doit être obligatoirement complété (« required »).
Si on laisse les paramètres par défaut et que vous écrivez ce mail : test@
puis que vous enlevez le curseur du champs (en cliquant ailleurs sur la page), ce dernier doit s’entourer de rouge, vous indiquant que votre mail est faux (et il l’est, « test@ » n’est pas un mail valide).
En revanche, si vous indiquez le mail suivant : test@test
Et que vous enlevez là aussi le curseur du champs, cette fois-ci le champs ne devient plus rouge alors que votre mail n’est pas exact puisqu’il manque le suffixe/la fin (.fr, .com, etc) (donc comportement anormal de la détection).
Essayez :
Et c’est ce qui rend fort intéressant le pattern !
Ce qui m’étonne encore c’est pourquoi cette « erreur » n’a pas été corrigé depuis le temps, à croire que personne ne s’en est rendu compte…
Pour corriger ça, je vous propose d’ajouter le pattern suivant dont je me servais sur Pluxml et pour lequel je n’ai pas eu de problème.
Le voici : pattern="[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+.[a-zA-Z.]{2,15}"
Alors, comment ça se lit ?
On dit qu’avant le « @ », on accepte toutes les lettres minuscules et majuscules et qu’en plus, on accepte les points, les tirets et les tirets bas (underscore, touche 8 du clavier).
Puis après le « @ » on accepte toutes les lettres, des points et des tirets/tirets bas.
Puis pour le suffixe, on impose une limite de caractères (seulement des lettres et dont le nombre varie de 2 à 10 lettres) (ça marche donc aussi pour le « .co.uk » des Anglais).
Vous pouvez essayer de compléter avec un « test@test » et ça ne marchera pas cette fois ;)
Essayez :
— — —
Je rajoute une vidéo de Grafikart.fr, qui fait de très bonnes vidéos sur le web design je trouve :
