Contenu du cours
Maîtrise Avancée de JavaScript
Maîtrise Avancée de JavaScript
Défi : Événements et Écouteurs d'Événements
Tâche
Vous construisez un formulaire où les utilisateurs peuvent soumettre leurs détails. Votre objectif est de valider les entrées des utilisateurs, de fournir un retour en temps réel pendant qu'ils tapent, et d'empêcher la soumission du formulaire si l'entrée est invalide.
Retour en Temps Réel sur les Entrées :
Écoutez les changements pendant que l'utilisateur tape ;
À l'intérieur du gestionnaire d'événements, vérifiez la longueur de la valeur d'entrée ;
Si elle est inférieure à 3 caractères, définissez le contenu du
<p>
avec l'IDfeedback
sur"Le nom est trop court."
;Si elle est de 3 caractères ou plus, définissez
feedback
sur"Le nom semble bon !"
.
Empêcher la Soumission par Défaut du Formulaire :
Écoutez les soumissions de formulaire ;
Empêchez le formulaire de se soumettre par défaut ;
Vérifiez la valeur d'entrée ;
Si elle est inférieure à 3 caractères, affichez
"Veuillez entrer un nom plus long"
dans le<p>
avec l'IDform-message
;Si elle est de 3 caractères ou plus, affichez
"Formulaire soumis avec succès !"
dansform-message
.
index.html
index.css
index.js
Utilisez l'événement
input
pour écouter les changements lorsque l'utilisateur tape ;Utilisez
event.target.value.length < 3
pour vérifier la longueur de la valeur d'entrée ;Utilisez l'événement
submit
pour écouter les soumissions de formulaire ;Utilisez
event.preventDefault()
pour arrêter le comportement par défaut de soumission du formulaire ;Utilisez
nameInput.value.length < 3
pour vérifier la valeur d'entrée.
index.html
index.css
index.js
Merci pour vos commentaires !