JavaScript — Formulaires et validation
Validation HTML native et JS personnalisée
Concepts Théoriques
Les formulaires sont l'interface entre l'utilisateur et votre site. La validation côté client offre un feedback instantané — l'utilisateur sait immédiatement si son email est invalide.
Pourquoi valider côté client ET côté serveur
La validation côté client est un confort UX, pas une sécurité. Un utilisateur peut désactiver JavaScript et contourner toutes vos vérifications. La validation côté serveur reste obligatoire.
Validation HTML native
HTML5 offre des attributs de validation intégrés qui fonctionnent sans JavaScript : required (champ obligatoire), type="email" (vérifie le format), minlength/maxlength (longueur), min/max (valeur), pattern (regex).
Le navigateur affiche automatiquement un message d'erreur quand la validation échoue.
Validation JavaScript personnalisée
Pour des validations complexes ou un affichage d'erreurs personnalisé :
form.addEventListener('submit', (event) => { event.preventDefault(); /* valider manuellement */ });
event.preventDefault() empêche le navigateur d'envoyer le formulaire. Vous contrôlez ce qui se passe.
Les événements de formulaire
- submit — le formulaire est soumis. Pour la validation finale.
- input — la valeur change en temps réel (chaque frappe). Pour le compteur de caractères.
- blur — le champ perd le focus. Pour valider quand l'utilisateur quitte le champ.
- focus — le champ reçoit le focus. Pour afficher un message d'aide.
> Bonne pratique : Combinez la validation HTML native (premier filet) avec une validation JS au blur ET au submit.