Comment puis-je écouter les événements de soumission de formulaire en Javascript au-delà des attributs HTML ?

Écouter les événements de soumission de formulaire en Javascript : au-delà des attributs HTML

La détection de la soumission d'un formulaire en Javascript est essentielle pour valider les entrées de l'utilisateur et contrôler le comportement du formulaire. Bien que l'utilisation d'attributs HTML tels que onClick et onSubmit puisse suffire, cela limite la personnalisation et la flexibilité. Cet article explore des méthodes alternatives pour écouter l'événement de soumission du formulaire à l'aide de Javascript pur et de bibliothèques communes.

Approche Javascript pure

Pour attacher des écouteurs d'événement aux éléments du formulaire, utilisez addEventListener ou attachEvent en fonction de la prise en charge du navigateur :

<code class="javascript">var ele = /*Your Form Element*/;
if (ele.addEventListener) {
  ele.addEventListener("submit", callback, false); // Modern browsers
} else if (ele.attachEvent) {
  ele.attachEvent("onsubmit", callback); // Old IE
}</code>

Pour annuler l'événement de soumission natif, utilisez PreventDefault() dans la fonction de rappel :

<code class="javascript">document.querySelector("#myForm").addEventListener("submit", function (e) {
  if (!isValid) {
    e.preventDefault(); // Stop form from submitting
  }
});</code>

Approche de la bibliothèque

Si l'utilisation d'une bibliothèque (par exemple, jQuery) est préférable :

• jQuery :

<code class="javascript">$(ele).submit(callback);</code>

Cross -Compatibilité des navigateurs

Bien que la méthode addEventListener soit largement prise en charge, les navigateurs plus anciens peuvent nécessiter attachEvent. Pour garantir la compatibilité entre navigateurs, utilisez les deux méthodes si nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!