TP validation d’un formulaire en JavaScript
TP validation d’un formulaire en JavaScript
-
Objectif
- Etre capable de valider un formulaire en JavaScript
-
Exercice 01
-
Énoncé
- Écrire une page HTML5 comportant un formulaire composé d’un label, un champ de saisie et d’un simple bouton le tous dans un fieldset avec legend « Validation ». Cette page doit passer la validation W3C.
- Créer un fichier validation.js comportant uniquement l’instruction alert("apcpedagogie.com").
- Associer ce fichier à la page HTML et recharger à nouveau votre page HTML. Que se passe-t-il ? Vérifier que votre page passe toujours la validation W3C et qu’il n’y a pas d’erreurs JavaScript dans la console d’erreurs
- On remplace l’instruction précédente par :
- Modifi er la fonction de valider() pour afficher un message d’erreur lorsque le champ est vide, et afficher le contenu du champ lorsqu’il ne l’est pas.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 02
-
Énoncé
- Créer un fichier HTML, intitulé Formation, contenant le formulaire suivant :
- Le clic sur le bouton « Envoyer » de type
submitfait l’appel à une fonction « Verif () » écrite en JavaScript et qui permet de vérifier les conditions suivantes : - Les champs Prénom et Nom, CIN et Adresse mail doivent être non vides.
- Les Noms doivent commencer par majuscule et le reste des caractère en minuscule.
- Les Prénoms doivent être en majuscule , en cas d’un nom ou prénom composé seule le premier mot est considéré comme nom.
- Le champ CIN ne contient que 8 chiffres de 0 à 9.
- L’adresse e-mail (n’utiliser pas le type « mail ») doit comporter le caractère arobase(@) et un point (.).
- Le niveau Secondaire est sélectionné par défaut.
- On peut choisir au maximum deux modules de formation.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 03
-
Énoncé
- Créez une page web qui contiendra un formulaire. Ce formulaire contiendra trois champs de texte (de type text obligatoirement) et un bouton de soumission.
- Il faudra faire en sorte que lorsque le formulaire est soumis, vous afficherez un tableau contenant des nombres crées aléatoirement
- La dimension du tableau est saisie dans le premier zone de texte, Les nombres aléatoires sont bornés entre une limite inférieure saisie dans le deuxième champ de texte et une limite supérieur qui est saisie dans le troisième champ de texte
- Si les valeurs des champs de texte du formulaire ne sont pas des entiers ou vides, vous afficherez une erreur.
- La limite inférieur doive être inférieur au limite supérieur si non vous afficherez une erreur.
- Il faudra faire en sorte que chaque fois lorsque le nombre de colonne atteint 10, vous le faire retourner à la ligne.
- Vous n’utiliserez pas de Php ; uniquement du HTML, du Bootstrap ou CSS et du JavaScript.
- Votre page devra ressembler à ceci :
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 04
-
Énoncé
- Créez une page web qui contiendra un formulaire. Ce formulaire contiendra trois champs de texte (de type text obligatoirement) et un bouton de soumission.
- Il faudra faire en sorte que lorsque le formulaire est soumis, vous afficherez un tableau contenant des nombres crées aléatoirement
- La dimension du tableau est saisie dans le premier zone de texte, Les nombres aléatoires sont bornés entre une limite inférieure saisie dans le deuxième champ de texte et une limite supérieur qui est saisie dans le troisième champ de texte
- Si les valeurs des champs de texte du formulaire ne sont pas des entiers ou vides, vous afficherez une erreur.
- La limite inférieur doive être inférieur au limite supérieur si non vous afficherez une erreur.
- Affichez pour chaque valeur le nombre de fois qu’elle à été répétée dans le tableau.
- Votre page devra ressembler à ceci :
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 05
-
Énoncé
- Création du Formulaire
- Le centre de formation apcpedagogie offre à sa clientèle un site Web permettant l’abonnement aux différents modules de formation en ligne.
- Écrire le code html5 qui permet de reproduire le formulaire inscription.html, représenté par le schéma suivant :
- Le formulaire est divisé en trois groupes.
- Le premier groupe permet d’obtenir les coordonnées du client. Il contient cinq zones de texte pour la saisie du nom, du prénom, de l’e-mail, l’adresse du site web du client et une zone de mot de passe.
- Une zone calendrier pour sélectionner la date de naissance du client
- Ces champs sont suivis d’un groupe de boutons radio pour indiquer le sexe de la personne.
- Enfin, ce groupe se termine par une liste de sélection qui contient trois groupes d’options pour le choix du pays groupé par continent comme le montre le schéma ci-dessus.
- Le deuxième groupe permet de sélectionner les formations du client. Il comprend trois cases à cocher et une zone de texte multilignes de 50 caractères de large et de 5 lignes de haut.
- Le troisième groupe contient un composant d’envoi de fichier et un champ caché indiquant la taille maximale des fichiers fixée à 10 Ko.
- Le formulaire se termine bien évidemment par l’insertion des boutons d’envoi et de réinitialisation.
- NB:
- N’utilisez pas des tableaux
- Aucun style ne devra apparaître dans les balises mais dans une feuille de style.
- Mise en forme du Formulaire
- Remplissez le fichier style.css relié à la page inscription.html pour avoir le style suivant :
- Validation du Formulaire
- A l’aide d’un script javascript écrit dans une page nommée inscription.js, réaliser les évènements suivants :
- Le clic sur le bouton Valider fait appel à une fonction « verif() » écrite en JavaScript qui vérifie le remplissage du formulaire en respectant les règles suivantes :
- Tous les champs doivent être remplis
- Le mot de passe doit être formé exactement de 8 caractères.
- Le choix d’un genre est obligatoire
- La sélection d’un pays est obligatoire
- Au moins une formation est choisi
- L’envoie d’un image est obligatoire
- Lorsque une zone de texte ou textarea perd le focus la bordure prenne une couleur verte.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
function valider() {
var zoneSaisie = document.getElementById("zoneSaisie");
alert("La Zone de saisie contient : " + zoneSaisie.value);
}
