Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Implémenter des Écouteurs d'Événements | Gestion des Événements et Interactions Utilisateur en JavaScript
Maîtrise Avancée de JavaScript

bookDéfi : Implémenter des Écouteurs d'Événements

Tâche

Vous construisez un formulaire permettant aux utilisateurs de soumettre leurs informations. Votre objectif est de valider la saisie de l'utilisateur, de fournir un retour en temps réel pendant la saisie, et d'empêcher la soumission du formulaire si la saisie est invalide.

  1. Retour en temps réel sur la saisie :
    • Écouter les modifications pendant la saisie de l'utilisateur ;
    • À l'intérieur du gestionnaire d'événement, vérifier la longueur de la valeur saisie ;
    • Si elle contient moins de 3 caractères, définir le contenu du <p> avec l'ID feedback sur "Name is too short." ;
    • Si elle contient 3 caractères ou plus, définir feedback sur "Name looks good!".
  2. Empêcher la soumission par défaut du formulaire :
    • Écouter les soumissions du formulaire ;
    • Empêcher le comportement par défaut de soumission du formulaire ;
    • Vérifier la valeur saisie ;
    • Si elle contient moins de 3 caractères, afficher "Please enter a longer name" dans le <p> avec l'ID form-message ;
    • Si elle contient 3 caractères ou plus, afficher "Form submitted successfully!" dans form-message.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utiliser l'événement input pour écouter les modifications pendant la saisie de l'utilisateur ;
  • Utiliser event.target.value.length < 3 pour vérifier la longueur de la valeur saisie ;
  • Utiliser l'événement submit pour écouter les soumissions du formulaire ;
  • Utiliser event.preventDefault() pour empêcher le comportement par défaut de soumission du formulaire ;
  • Utiliser nameInput.value.length < 3 pour vérifier la valeur saisie.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 3

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.22

bookDéfi : Implémenter des Écouteurs d'Événements

Glissez pour afficher le menu

Tâche

Vous construisez un formulaire permettant aux utilisateurs de soumettre leurs informations. Votre objectif est de valider la saisie de l'utilisateur, de fournir un retour en temps réel pendant la saisie, et d'empêcher la soumission du formulaire si la saisie est invalide.

  1. Retour en temps réel sur la saisie :
    • Écouter les modifications pendant la saisie de l'utilisateur ;
    • À l'intérieur du gestionnaire d'événement, vérifier la longueur de la valeur saisie ;
    • Si elle contient moins de 3 caractères, définir le contenu du <p> avec l'ID feedback sur "Name is too short." ;
    • Si elle contient 3 caractères ou plus, définir feedback sur "Name looks good!".
  2. Empêcher la soumission par défaut du formulaire :
    • Écouter les soumissions du formulaire ;
    • Empêcher le comportement par défaut de soumission du formulaire ;
    • Vérifier la valeur saisie ;
    • Si elle contient moins de 3 caractères, afficher "Please enter a longer name" dans le <p> avec l'ID form-message ;
    • Si elle contient 3 caractères ou plus, afficher "Form submitted successfully!" dans form-message.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utiliser l'événement input pour écouter les modifications pendant la saisie de l'utilisateur ;
  • Utiliser event.target.value.length < 3 pour vérifier la longueur de la valeur saisie ;
  • Utiliser l'événement submit pour écouter les soumissions du formulaire ;
  • Utiliser event.preventDefault() pour empêcher le comportement par défaut de soumission du formulaire ;
  • Utiliser nameInput.value.length < 3 pour vérifier la valeur saisie.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 3
some-alt