JavaScript: Capturer l'Envoi d'un Formulaire

Dans ce tutoriel, j'aimerais vous montrer comment capter un clic sur le bouton de soumission d'un formulaire HTML. Un domaine d'application possible serait de vérifier les valeurs qu'un utilisateur a saisies dynamiquement avant de les soumettre, par exemple pour afficher un message à l'utilisateur si nécessaire.

Je voudrais présenter deux solutions différentes pour cela: la première méthode consiste à utiliser du JavaScript pur, la deuxième solution fonctionne avec jQuery.

Le Formulaire HTML

Pour la démonstration, nous utilisons deux formulaires simples. Le premier doit illustrer la méthode JavaScript pure, le second celle de jQuery.

<h1>JavaScript</h1>
<form id="form_js" method="post" action="">
  <input id="inp_js" type="text" value="">
  <input type="submit" value="Enregistrer">
</form>

<h1>jQuery</h1>
<form id="form_jquery" method="post" action="">
  <input id="inp_jquery" type="text" value="">
  <input type="submit" value="Enregistrer">
</form>

Les deux formulaires sont composés d'un bouton de soumission et d'un champ de saisie de texte. Afin de pouvoir traiter ultérieurement les formulaires hors du script, nous avons appliqué les identifiants uniques "form_js" et "form_jquery" aux formulaires. De plus, les champs de saisie ont chacun un identifiant unique.

Script utilisant du JavaScript pur

Tout d’abord, nous souhaitons examiner la solution JavaScript pure. Après avoir chargé la page entière (window.onload), nous utilisons document.getElementById() pour définir une propre fonction OnSubmit pour le formulaire avec l'ID "form_js".

window.onload=function() {

   document.getElementById('form_js').onsubmit=function() {	
      if (document.getElementById('inp_js').value == '') {
         alert('Veuillez remplir le champ.');
         return false;  
      } else {
         return true;	  
      }  
   } 

}

Cette fonction vérifie la valeur du champ de saisie pour voir s'il est vide. Si oui, une boîte de message contenant un avertissement s'affiche et "false" est renvoyé. Cela garantit que le champ n'a pas pu être soumis. Cependant, si le champ contient du texte, nous renvoyons "true" à la place, afin que le formulaire soit soumis.

Script utilisant jQuery

Le code suivant conduit au même résultat. Cependant, cette fois, nous utilisons jQuery. Encore une fois, notre fonction ne doit pas être définie avant le chargement de la page HTML complète. Cela peut être fait en utilisant $(document).ready() dans le monde jQuery.

$(document).ready(function() {	
			
   $('#form_jquery').submit(function(e){  
      if ($('#inp_jquery').val() == '') {
         e.preventDefault();  
         alert('Veuillez remplir le champ.');  
      }  
   });	
					   
});	

Ensuite, nous récupérons le formulaire soumis avec jQuery (formulaire avec l'ID form_jquery). Encore une fois, nous vérifions à ce stade si notre champ de saisie contient une valeur non vide. Sinon, nous affichons à nouveau notre notification d'avertissement et nous appelons .preventDefault(). Avec cette fonction, nous pouvons empêcher la soumission du formulaire.

Remarquer

La vérification d'un formulaire avec JavaScript ne peut pas remplacer une vérification sur le site serveur. JavaScript est utile pour créer des messages d'avertissement pour l'utilisateur. Cependant, la vérification des valeurs doit toujours être effectuée dans le script PHP sur le serveur. Vous devez garder à l’esprit que JavaScript peut être désactivé et facilement manipulé.