Empêcher la soumission de formulaire JavaScript

Kushank Singh 12 octobre 2023
  1. Utiliser une fonction dans la balise script pour arrêter l’exécution d’un formulaire en JavaScript
  2. Utilisez Vanilla JavaScript pour arrêter l’exécution du formulaire en JavaScript
  3. Utiliser la bibliothèque jQuery pour arrêter l’exécution du formulaire en JavaScript
  4. Utilisez la boîte à outils Dojo pour arrêter l’exécution du formulaire en JavaScript
Empêcher la soumission de formulaire JavaScript

JavaScript est pris en charge par tous les navigateurs Web et est utilisé pour créer des pages Web dynamiques. Dans ce tutoriel, nous allons arrêter l’exécution d’un formulaire à l’aide de JavaScript.

Utiliser une fonction dans la balise script pour arrêter l’exécution d’un formulaire en JavaScript

La balise script est utilisée pour contenir un script côté client. Nous avons créé une fonction JavaScript au sein des balises script pour empêcher la soumission du formulaire.

Vérifiez le code ci-dessous.

<form onsubmit="submitForm(event)">
  <input type="text">
  <button type="submit">Submit</button>
</form>
<script type="text/JavaScript">
  function submitForm(event){
    event.preventDefault();
    window.history.back();
  }
</script>

La fonction preventDefault() ne laisse pas se dérouler l’action par défaut de l’événement. Le window.history.back() nous renvoie à l’URL précédente de notre historique. Toutes les méthodes discutées incluront ces deux fonctions.

Utilisez Vanilla JavaScript pour arrêter l’exécution du formulaire en JavaScript

Vanilla JavaScript fonctionne uniquement sur JavaScript sans l’utilisation de bibliothèques supplémentaires.

Un écouteur d’événement peut être utilisé pour empêcher la soumission de formulaire. Il est ajouté au bouton de soumission, qui exécutera la fonction et empêchera la soumission d’un formulaire lorsque vous cliquez dessus.

Par example,

element.addEventListener('submit', function(event) {
  event.preventDefault();
  window.history.back();
}, true);

Utiliser la bibliothèque jQuery pour arrêter l’exécution du formulaire en JavaScript

jQuery est une bibliothèque rapide et robuste qui simplifie l’utilisation de JavaScript. C’est l’une des bibliothèques les plus populaires de JavaScript.

Nous verrons comment nous pouvons empêcher la soumission du formulaire.

Vérifiez le code ci-dessous.

$('#form').submit(function(event) {
  event.preventDefault();
  window.history.back();
});

La fonction $('#form').submit() est utilisée pour soumettre un formulaire dans jQuery.

Utilisez la boîte à outils Dojo pour arrêter l’exécution du formulaire en JavaScript

Il s’agit d’une bibliothèque JavaScript qui facilite l’utilisation multiplateforme de JavaScript pour les applications Web. Il utilise la fonction dojo.connect() pour gérer les événements. Dans notre cas, cela est utilisé pour la soumission de formulaire, et nous l’empêcherons en utilisant les fonctions preventDefault() et window.history.back().

Par example,

dojo.connect(form, 'submit', function(event) {
  event.preventDefault();
  window.history.back();
});

Article connexe - JavaScript Form