Atelier Javascript
Validation de formulaires.
Réponse AJAX

Objectif du TP

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 :

Préparation de la structure globale du code

Génération de la page HTML, avec son formulaire

formulaire
Pour nos tests, créez une page HTML contenant un formulaire, en respectant les consignes suivantes : 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 :

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

formulaire
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ù :

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 :

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 :

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 :

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 :

En savoir plus sur les expressions rationnelles en JavaScript : https://developer.mozilla.org/fr/Guide_JavaScript_1.5/Expressions_rationnelles

Copiez ici le pattern (juste le pattern, pas l'ensemble de la fonction) qui décrit les numéros de téléphone portable :

Votre réponse n°7

Validation d'une adresse mél,
avec les expressions régulières

Entrez ici votre regEx :
//

Doit correspondre à :
 nom@fai.ext
 nom.prenom@mon.fai.extension
 le-nom.le-prenom@mon-fai.extension
 

Ne doit pas correspondre à :
 nom prenom@fai.ext
 nom@fai
 nom@fai@com
 nom-prenom.fai.com
 

Dernière étape de validation : vous devez maintenant trouver l'expression régulière qui valide les adresses élecroniques.

Pour ça, aidez vous de l'outil ci-contre (pour vérifier votre pattern) et du lien déjà donné ci-dessus :
https://developer.mozilla.org/fr/Guide_JavaScript_1.5/Expressions_rationnelles

Copiez ici le pattern (juste le pattern, pas l'ensemble de la fonction) qui décrit les adresses électroniques :

Votre réponse n°8