Apprendre Défi : Implémenter des Écouteurs d'Événements | Gestion des Événements et Interactions Utilisateur en JavaScript

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.

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!".
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.css

index.js

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.css

index.js

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 3

Demandez à l'IA

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

Suggested prompts:

Can you show me how to set up the HTML form and input elements?

What would the JavaScript code look like for this validation?

Can you explain how to connect the feedback messages to the input and form events?

Awesome!

Completion rate improved to 2.22

Glissez pour afficher le menu

Tâche

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!".
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.css

index.js

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.css

index.js

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 3