Comment détecter les événements de soumission de formulaire en JavaScript sans modifier le HTML ?

Détection des événements de soumission de formulaire sans balisage HTML

En JavaScript, une tâche courante consiste à valider les formulaires avant de les soumettre. Traditionnellement, cela était réalisé en utilisant des attributs HTML tels que onSubmit et onClick. Cependant, pour créer une bibliothèque de validation autonome sans altérer le code HTML, vous avez besoin d'une meilleure approche.

La solution réside dans l'écoute de l'événement submit du formulaire de manière native en JavaScript. Voici comment procéder :

<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>

Dans ce code, ele représente votre élément de formulaire et le rappel est la fonction que vous souhaitez exécuter lors de la soumission du formulaire.

Propagation des événements

Pour comprendre pleinement ce code, il est important de comprendre la propagation des événements. Considérez le code HTML suivant :

<code class="html"><form id="myForm">
    <input type="submit">
</form></code>

Lorsque vous cliquez sur le bouton de soumission, un événement « soumettre » est déclenché. Cet événement fait remonter l'arborescence DOM, en commençant par le bouton et en se terminant par l'élément de formulaire. En écoutant l'événement de soumission sur le formulaire lui-même (ele.addEventListener('submit')), nous capturons l'événement au fur et à mesure qu'il remonte dans l'arborescence.

Empêcher la soumission du formulaire par défaut

Si vous souhaitez effectuer des actions personnalisées lors de la soumission du formulaire (comme la validation), vous pouvez empêcher le comportement de soumission par défaut du navigateur en utilisant PreventDefault().

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

Dans le code ci-dessus, si isValid est faux , la soumission du formulaire est empêchée.

Intégrations de bibliothèques

Bien que l'utilisation de JavaScript natif soit préférable, certains développeurs préfèrent les bibliothèques. Voici comment écouter les événements de soumission de formulaire avec les bibliothèques populaires :

• jQuery : $(ele).submit(callback);
• Prototype : ele.observe('submit', callback);
• MooTools : ele.addEvent('submit', callback);

Par en comprenant la propagation des événements et en utilisant les intégrations natives addEventListener ou de bibliothèque, vous pouvez écouter efficacement les événements de soumission de formulaire en JavaScript sans modifier le code HTML.

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!