Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site
Qui n'a jamais buté en essayant de remplir un formulaire. Il faut en effet que les données saisies respectent des formats;
certains champs doivent obligatoirement être renseignés, il doit y avoir des cohérences entre différents champs, etc.
Il est préférable d'adresser au serveur des données valides donc contrôlées côté navigateur (ou côté client).
Ce qui ne dispense d'un contrôle de saisie côté serveur (contrôle en PHP) pour des raisons que j'explique plus loin.
Dans le cadre d'un contrôle de saisie côté client on associe à chaque champ une expression régulière. La saisie dans le champ est valide si elle correspond au format défini par l'expression régulière.
CSS :
Emploi des pseudo-classes :invalid et :valid sur les balises input.
Donc tant que la saisie dans un champ ne correspond ni au type de champ ni au pattern la saisie est en rouge mais passe au vert dès qu'elle correspond
au motif.
HTML:
Envoi des donnés dans la même page avec la méthode GET (les données apparaissent dans la barre d'adresse).
Avec HTML5 les expressions régulières deviennent des valeurs des attributs pattern.
Le type de champ "email" oblige à saisir un caractère @ et adapte le clavier des terminaux mobiles.
Mais une adresse mail valide c'est aussi un point après l'arobase. Aussi ai-je rajouté un pattern.
Grâce aux nouveaux attributs HTML5 required, pattern il n'est plus nécessaire, le plus souvent, d'associer au formulaire un script de contrôle.
Une expression régulière est une suite de couples classes-quantificateurs.
Une classe indique le ou les caractères autorisés à la saisie. On reconnait une classe car elle est entre crochets.
Une classe peut être un énumération de caractères autorisés ou un intervalle ou un mélange des deux.
Un quantificateur suit une classe et indique le nombre de caractères autorisés à saisir.
Un quantificateur est entre accolades.
Maintenant vous devez être capable de comprendre les expressions régulières de l'exemple.
Expression associée à la saisie du numéro de téléphone :
[0-9]{10} : on ne peut saisir que des chiffres ; il faut en saisir 10 ni plus ni moins
Expression associée à la saisie du mot de passe :
[A-z0-9]{6,8} : on ne peut saisir que des lettres non accentuées et des chiffres ; entre 6 et 8
[A-z0-9._-]+[@]{1}[a-zA-Z0-9._-]+[.]{1}[a-zA-Z]{2,10}
C'est un peu plus compliqué ... Il y a plusieurs couples "classes-quantificateurs"
Attention les contrôles de saisie par le navigateur (côté client) ne dispensent pas de contrôles côté serveur (en PHP). En effet le JavaScript peut être désactivé sur le navigateur ; il est facile pour un internaute chevronné de modifier le code du formulaire (supprimer par exemple les attributs de contrôle).
Ainsi sous Chrome appuyez sur F12 ; sélectionnez "éléments" ; sélectionnez une balise INPUT ; faites un clic droit ; sélectionnez "Edit as HTML".
Vous pouvez donc dans l'exemple supprimer les attributs "required" et "pattern" des 4 INPUT puis saisir n'importe quoi dans les champs.
Donc pour des raisons de sécurité il faut impérativement un contrôle côté serveur.
Le contrôle de saisie côté client a un rôle ergonomique : limiter les aller-retour entre le client et le serveur.
En effet en principe, grâce aux contrôles côté navigateur la première soumission sera fructueuse.
Dans certains cas le contrôle de saisie par le navigateur ne peut se limiter au HTML. Il faut complèter avec un script. Le contrôle de conformité d'une saisie à un gabarit peut alors se faire dans le script.
Pour vous inscrire sur un site de rencontres coquin (lol) vous devez saisir en guise d'identifiant votre adresse mail et la confirmer
puis choisir un mot de passe et le confirmer.
Le mot de passe doit contenir entre 6 et 8 caractères alphanumériques c'est à dire des lettres non accentuées et des chiffres.
Les autres caractères sont bannis.
Avec HTML il est impossible de comparer le contenu du champ1 avec celui du champ2 ; comparer le contenu du champ3 avec celui du champ4.
Il faut donc complèter le contrôle de saisie via HTML par un script !
J'ai donné un nom au formulaire : name ="formulaire".
Le bouton de commande doit obligatoirement être de type submit sinon les contrôles HTML (grâce aux attributs required et pattern) ne sont pas effectués.
Concernant l'adresse mail le type "email" oblige à saisir un caractère @.
Dans la balise form j'ai rajouté : onSubmit="return fenvoi()"
Pour référencer dans le script les champs j'ai utilisé la syntaxe : nomformulaire.nomchamp. Il s'agit d'une technique JS très ancienne mais toujours valide.
J'ai défini une expression régulière complexe correspondant au bon format d'une adresse mail dans la variable gabarit. Cette variable est un objet
de type RegExp créée avec le constructeur ad hoc.
Je vérifie avec la méthode test() appliqué à l'objet RegExp si la saisie correspond à ce format.
Définir le gabarit de saisie de l'adresse mail dans le script plutôt que comme valeur de l'attribut pattern est une maladresse
puisque malgré l'absence de point après l'arobase la saisie va basculer en vert.
Mais cette maladresse est ici volontaire. je voulais vous montrer comment utiliser un objet de type RegExp dans un script.
La variable compteur est incrémentée à chaque fois qu'un test est vérifié.
Si compteur < 3 la fonction retourne false et donc pas de soumission.
Si compteur ==3 (tous les tests vérifiés) la fonction retourne true et donc soumission des donnés.
Premier essai :
Saisir : toto@freefr - toto@freefr - abcedef -abcdef
Les mails et mots de passe sont identiques mais le mail est incorrect (pas de point après @) donc pas de soumission.
Deuxième essai :
Saisir : toto@free.fr - toto@free.fr - abcedef -abcdef
Les mails et mots de passe sont identiques et le mail est correct (un point après @) donc soumission.