Quand un formulaire HTML déclenche son événement onsubmit, le mot-clé this peut pointer vers des objets différents selon la manière dont le gestionnaire est attaché. Attribut HTML inline, addEventListener, fonction fléchée : chaque approche modifie la valeur de this et, par extension, la capacité à lire les champs du formulaire ou à bloquer l’envoi. Cet article compare ces comportements, mesure leurs écarts et identifie les pièges concrets que les développeurs rencontrent en production.
Valeur de this selon le mode d’attachement du gestionnaire onsubmit
La confusion autour de this dans un événement onsubmit vient du fait que JavaScript lui attribue une valeur contextuelle, pas une valeur fixe. Le tableau ci-dessous résume ce que this désigne dans chaque cas de figure courant.
A voir aussi : Découvrez le savoir grâce à une encyclopédie collaborative
| Mode d’attachement | Valeur de this |
Accès direct aux champs via this.elements |
|---|---|---|
Attribut HTML inline (onsubmit="return validate(this)") |
L’élément <form> lui-même |
Oui |
form.onsubmit = function() {} |
L’élément <form> |
Oui |
addEventListener('submit', function() {}) |
L’élément <form> |
Oui |
addEventListener('submit', () => {}) (fonction fléchée) |
Le scope englobant (souvent window) |
Non |
Méthode d’une classe avec bind |
L’objet passé à bind |
Seulement si bind(formElement) |
Le point clé : les fonctions fléchées ne lient jamais this au formulaire. Elles héritent du contexte lexical parent. Dans la majorité des cas, ce parent est le module ou window, ce qui rend this.elements inaccessible.
A lire également : Nouvelle URL de xabriv.com : le guide pour retrouver le site
Fonction fléchée contre fonction classique dans onsubmit
Avec une fonction classique passée à addEventListener, le navigateur fixe this sur l’élément cible de l’événement, c’est-à-dire le <form>. Le développeur peut alors appeler this.elements.email.value sans stocker de référence préalable.
Avec une fonction fléchée, this pointe vers le scope englobant. Si le script est dans un module ES, this vaut undefined en mode strict. Si le script est global, this vaut window. Dans les deux cas, tenter this.elements produit une erreur.
La solution la plus fiable quand on utilise des fonctions fléchées : récupérer le formulaire via event.target plutôt que via this. L’objet event passé en paramètre du callback contient toujours la référence correcte, quel que soit le type de fonction.
Quand la fonction fléchée reste pertinente
Dans une classe ou un composant qui gère plusieurs formulaires, la fonction fléchée conserve le this de l’instance. Cela évite d’appeler .bind(this) dans le constructeur. Le compromis : accéder au formulaire via event.target au lieu de this, ce qui reste lisible.
preventDefault et return false dans un formulaire HTML
Bloquer l’envoi d’un formulaire fait partie du quotidien des gestionnaires onsubmit. Deux approches coexistent, mais elles ne se comportent pas de la même façon.
event.preventDefault()empêche le comportement par défaut (envoi au serveur) tout en laissant l’événement se propager aux éléments parents. C’est l’approche recommandée avecaddEventListener.return falsedans un attribut HTML inline (onsubmit="return validate()") annule l’envoi et stoppe la propagation. En revanche,return falsedans un callback attaché viaaddEventListenern’a aucun effet sur la soumission.- Un gestionnaire qui lance une exception avant d’atteindre
return falsene bloquera pas l’envoi du formulaire. Le serveur recevra des données potentiellement invalides.preventDefault()appelé en début de fonction protège contre ce scénario.
La règle opérationnelle : appeler preventDefault en premier, valider ensuite, soumettre manuellement si tout est correct. Ce schéma élimine le risque qu’une erreur JavaScript laisse passer un envoi non voulu.
Formulaires modaux avec dialog et impact sur this
La balise <dialog>, désormais supportée par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge), a changé la manière dont les formulaires sont affichés dans des fenêtres modales. Avec showModal(), le navigateur gère nativement le focus trap et l’overlay.
Un formulaire placé à l’intérieur d’un <dialog> peut utiliser l’attribut method="dialog". Dans ce cas, la soumission ferme la modale au lieu d’envoyer les données au serveur. L’événement submit est toujours déclenché, et this pointe bien vers le formulaire dans un gestionnaire classique.
Le piège : si le gestionnaire onsubmit appelle event.preventDefault(), la modale ne se ferme pas, car la fermeture est le « comportement par défaut » de method="dialog". Le développeur doit alors appeler dialogElement.close() manuellement après la validation.
Erreurs fréquentes avec this et submit en JavaScript
Appel programmatique via form.submit()
Appeler document.forms["monForm"].submit() depuis un lien ou un bouton externe ne déclenche pas l’événement submit. Le gestionnaire onsubmit n’est jamais exécuté, la validation côté client est contournée. Pour déclencher le cycle complet (validation native, événement, gestionnaire), il faut utiliser form.requestSubmit(), qui simule un clic sur le bouton de soumission.
document.forms versus getElementById
document.forms["form"] accède au formulaire par son attribut name. Si le name est absent, la collection renvoie undefined. Préférer document.getElementById ou une référence directe stockée dans une variable pour éviter des erreurs silencieuses.
Perte de this dans un setTimeout
Envelopper la logique de validation dans un setTimeout à l’intérieur du gestionnaire onsubmit déplace l’exécution hors du contexte synchrone de l’événement. this peut alors pointer vers window même avec une fonction classique, et preventDefault() n’a plus d’effet car l’événement est déjà traité.
Le choix entre attribut inline, addEventListener avec fonction classique ou fonction fléchée dépend de l’architecture du projet. Dans tous les cas, event.target reste la référence la plus stable vers le formulaire, indépendante du mode d’attachement et du contexte d’exécution. Tester systématiquement la valeur de this avec console.log(this) dans le gestionnaire évite la plupart des bugs liés à la soumission de formulaires en JavaScript.
