Après le TP Javascript débutant, et le TP Javascript avancé, ce TP est spécialisé dans la validation de formulaires.
Dans le dernier chapitre, on y trouve quelque chose d'un peu difficile : l'utilisation
d'expressions régulières. Mais, une fois que vous y aurez goûté, vous ne pourrez plus vous en passer ! On va valider notamment :
les champs remplis/pas remplis,
les codes postaux,
les numéros de téléphones,
les adresses électroniques.
Préparation de la structure globale du code
Génération de la page HTML, avec son formulaire
Pour nos tests, créez une page HTML contenant un formulaire, en respectant les consignes suivantes :
La page Web doit faire un lien vers le fichier Javascript nommé mon-javascript.js.
Le formulaire doit être en méthode POST et posséder l'attribut name="monFormulaire".
Les champs login, Code postal, Tél. fixe, Tél. portable, mél se nomment respectivement login, codePostal, telFixe, telPortable, mel.
Le nom des autres champs n'a pas d'importance car ils ne sont pas utilisés dans cette validation.
La mise en forme n'a pas d'importance, vous n'êtes pas obligé de respecter l'alignement de la capture ci-contre.
N'oubliez pas le bouton de soumission du formulaire.
Copiez ici le code HTML du formulaire :
Votre réponse n°1
Préparation de la page Javascript
Créez le fichier mon-javascript.js. Nous alllons appliquer la séparation stricte HTML/Javascript, c'est donc ce fichier Javascript qui va créer les événements utiles. Votre fichier doit réaliser ceci :
Lors du chargement de la page, il la fonction initPage();
La fonction initPage fait que lors de la validation du formulaire, on appelle la fonction verifFormulaire();
La fonction verifFormulaire contient le code suivant :
Ecrivez l'en-tête de chaque fonction, avec un simple return true; à l'intérieur. N'oubliez pas que ces fonctions reçoivent une zone de texte en paramètre !
Pourquoi y a-t-il un tas de if, une variable intermédiaire ok, et un return ok, alors qu'on aurai pu simplifier avec une succession de return verifRempli(this.login);(si vous ne savez pas répondre à cette question, attendez la suite qui vous mettra sur la voie) ?
Votre réponse n°2
Un peu de mise en forme CSS pour signaler les erreurs à l'internaute
Nous allons créer un style pour signaler les erreurs à l'internaute. Par exemple, en cas d'erreur, le champ de texte sera sur fond rouge.
Créez une classe CSS erreur, qui se caractérise par un background-color rouge. Essayez cette classe sur le champ <input type=text name=login. Lorsque le résultat vous plait, supprimez le test.
Copiez ici le code de votre classe (uniquement la partie CSS) :
Votre réponse n°3
Validation d'un champ non vide
Ce code Javascript va se placer dans la fonction verifRempli() {} .
Pour accéder au contenu d'un champ, on utilise : document.monFormulaire.login.value où :
document est un objet prédéfini de Javascript,
monFormulaire est le nom que vous avez donné à votre formulaire (attribut name="...")
login est le nom que vous avez donné à votre zone de texte (attribut name="..." de la balise input)
value est une propriété prédéfinie de l'objet "zone de texte", comme pour la plupart des contrôles de saisie.
Modifier l'algorithme de la fonction verifRempli en vous basant sur l'algorithme suivant :
Testez, le champ devrait devenir rouge lorsque vous tentez de soumettre le formulaire alors que le login est vide. Tapez ici votre fonction verifRempli(avec son en-tête, mais sans le reste de la page) :
Votre réponse n°4
Validation d'un code postal
Pour valider un code postal français, on doit vérifier qu'il fait bien 5 caractères et qu'il sont tous numériques. Vous allez créez cette fonction en vous basant sur l'algorithme suivant :
Précisions utiles :
Pour obtenir la longueur d'une chaîne de caractères s, utilisez : s.length
Pour accéder au ième caractère de champ.value, utilisez : champ.value.charAt(i).
Pour savoir si un caractère c est un chiffre, utilisez : if (c>="0" && c <="9"), et vous aurez plutôt besoin du test opposé : if (c<"0" || c>"9")
Une fois que vous l'avez testé (l'arrière-plan du code postal devient rouge s'il ne contient pas 5 chiffres), Tapez ici votre fonction verifCodePostal :
Votre réponse n°5
Pour ceux qui aiment les codes élégants, remplacez :
par :
Validation d'un numéro de téléphone fixe : à vous de jouer
Vous allez faire cette fonction tout seul, en vous inspirant fortement de la validation des codes postaux.
Vous pouvez procéder ainsi :
Inutile de vérifier le nombre de caractères : il peut y en avoir 10 (par exemple dans '0600110011') ou plus (par exemple dans '06 00 11 00 11').
Il vaut mieux parcourir la chaîne (vous savez faire) et compter le nombre de chiffres (facile), on devra en trouver 10.
Pour les caractères qui ne sont pas des chiffres : vérifier qu'il s'agit d'un espace.
Vérifiez que le tout premier caractère est "0".
Testez puis tapez ici votre fonction verifTelFixe() :
Votre réponse n°6
Validation d'un numéro de téléphone mobile grâce aux expressions régulières
Précisions sur... les expressions régulières
Les expressions régulières fonctionnent à l'instar du LIKE en SQL, qui permet de représenter plusieurs chaînes différentes. Elles sont toutefois beaucoup plus puissantes.
Par exemple, voici ^le pattern qui décrit une chaîne comportant un nom (suite de lettres), suivi d'un espace, suivi d'un prénom : /^[a-zA-Z]+\s[a-zA-Z]+$/
Explications :
/ au début et à la fin : délimite le pattern de la même façon que deux guillemets délimitent une chaîne de caractère.
^ : signifie qu'on veut rencontrer ce pattern dès le début de la chaîne à vérifier.
[a-zA-Z] : représente n'importe quel caractère de l'alphabet.
* : signifie que l'élément précédent (caractère de l'alphabet) se répète une ou plusieurs fois.
\s : représente les espaces (ainsi que les tabulations et les retours chariot).
[a-zA-Z]+ : à nouveau n'importe quel caractère de l'alphabet, une ou plusieurs fois.
$ : signifie que la chaîne doit se terminer ici et qu'on accepte aucun autre caractère après avoir reconnu le pattern.
En vous aidant de l'encadré ci-dessus, ré-écrivez la fonction qui teste la validité d'un numéro de téléphone, en vous aidant de la base suivante :
Entrez ici votre regEx :
//
Doit correspondre à : 06 12 34 56 78 0612345678
Ne doit pas correspondre à : 0412345678 006 12 34 56 78 06 12 34 56 789
Pour construire l'expression régulière désignant n'importe quel numéro de téléphone mobile, vous aurez besoin de tous les éléments suivants :
^ : dit que le pattern doit être rencontré dès le début de la chaîne, cela évite de valider si l'utilisateur a saisi n'importe quoi avant son numéro.
\s : espace (ou tabulation ou retour chariot).
? : précise que l'élément précédent est optionnel. Pour valider un numéro de téléphone, on considère que les espaces sont optionnels ('0612345678' et '06 12 34 56 78' sont valides)
{n} : précise que l'élément précédent se répète n fois (puisqu'on veut rencontrer 5 suites de 2 chiffres).
(pattern){n} : précise que le pattern entre parenthèse (qui peut être une succession de plusieurs éléments) doit se répéter n fois.
$ : signifie qu'on veut rencontrer la fin de la chaîne à ce stade du pattern, ce qui évite de valider si l'utilisateur a saisi des caractères après son numéro de téléphone.
06 12 34 56 78