Dé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.
- 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'IDfeedback
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'IDform-message
; - Si elle contient 3 caractères ou plus, afficher
"Form submitted successfully!"
dansform-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
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
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
Dé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.
- 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'IDfeedback
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'IDform-message
; - Si elle contient 3 caractères ou plus, afficher
"Form submitted successfully!"
dansform-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
Merci pour vos commentaires !