Scribd
Importer
28 vues2 pages

TP2JS

Le document présente trois exercices de programmation en JavaScript liés à la validation des formulaires et à l'interaction utilisateur. Le premier exercice consiste à comparer deux adresses e-mail saisies par l'utilisateur, le deuxième à modifier le contenu d'une cellule de tableau, et le troisième à créer un formulaire d'inscription avec validation des données. Chaque exercice demande d'utiliser des événements JavaScript pour améliorer l'expérience utilisateur et assurer la validité des informations saisies.

Transféré par

mohamedhabibhermi
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
28 vues2 pages

TP2JS

Le document présente trois exercices de programmation en JavaScript liés à la validation des formulaires et à l'interaction utilisateur. Le premier exercice consiste à comparer deux adresses e-mail saisies par l'utilisateur, le deuxième à modifier le contenu d'une cellule de tableau, et le troisième à créer un formulaire d'inscription avec validation des données. Chaque exercice demande d'utiliser des événements JavaScript pour améliorer l'expérience utilisateur et assurer la validité des informations saisies.

Transféré par

mohamedhabibhermi
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 2

ISTIC Université de Carthage TP: Web 2

Prof: SAIDANI K.

Exercise 1:

Au sein du <div id="output"> se trouvent deux champs de texte donnant la possibilité à


l'utilisateur d'entrer son adresse e-mail, et de la ré-entrer pour confirmer qu'il ne s'est pas
trompé. Réalisez un script qui compare les deux adresses et se déclenche quand
l'utilisateur vient d'entrer une lettre (avec l'évènement onkeyup), comme dans l'exemple ci-
contre. Faire la vérification lors de la perte du focus (avec onblur) peut être utile aussi. Vous
pouvez utiliser les classes CSS red et green sur les <input /> pour montrer que le contenu
est mauvais ou bon.

Écrivez le code qui permet de faire ça on utilisant le document.getEementById().

Exercice 2 :

Au sein du <div id="output"> se trouve un tableau avec différentes cellules (<td>).


Imaginons que ce tableau soit une liste d'articles dans une interface d'administration. En
cliquant sur une cellule, son contenu disparaît et un input apparaît, permettant de modifier
le texte. Il s'agit donc d’un prompt (). Un exemple de résultat est donné ci-contre.

Écrivez le code qui convient.

Exercice 3 :
Objectif:

• Créer un formulaire d'inscription avec les champs : prénom, nom, adresse e-mail,
mot de passe, et confirmation de mot de passe.

• Valider les données avant l'envoi du formulaire (validation côté client).

• Afficher un message d'erreur sous chaque champ en cas de données incorrectes.

Détails de l'exercice :

1. Création du formulaire HTML:

o Un formulaire d'inscription avec les champs suivants :

▪ Prénom (obligatoire, longueur minimale : 2 caractères)

▪ Nom (obligatoire, longueur minimale : 2 caractères)

▪ Adresse e-mail (obligatoire, doit respecter le format e-mail)

▪ Mot de passe (obligatoire, longueur minimale : 6 caractères)

▪ Confirmation du mot de passe (doit être identique au champ "Mot de


passe")

o Un bouton "S'inscrire" qui soumet le formulaire.

2. Validation en JavaScript :

o Avant d'envoyer le formulaire, vérifier que :

▪ Tous les champs obligatoires sont remplis.

▪ Le champ e-mail contient une adresse e-mail valide (ex :


[email protected]).

▪ Le mot de passe contient au moins 6 caractères.

▪ La confirmation du mot de passe correspond au mot de passe.

o Si une erreur est détectée, afficher un message d'erreur sous le champ


concerné et empêcher l'envoi du formulaire.

Vous aimerez peut-être aussi