Les événements des formulaires avec jQuery

Présentation

• Dans cette leçon, nous allons découvrir les méthodes jQuery qui nous permettant de gérer les événements liés aux éléments de formulaires.
• Les éléments de formulaire possèdent leur événements associés. Par exemple, lorsqu'un champ est focalisé, on dit qu'il "prend le focus", car c'est sur lui que se trouve notre pointeur.
• Le tableau suivant répertorier les événements de formulaire en jQuery

Action	Fonction
Focalisation	focus()
Sélection (p.e. dans une liste)	select()
Changement de valeur	change()
Envoi du formulaire	submit()

Les méthodes focus() , focusin() ,blur() et focusout()

1. La méthode focus()

   • Se déclenche lorsque l'élément reçoit le focus (devient actif) soit par action de l'outil de pointage (souris), soit par la navigation tabulée (touches du clavier)
   • L'événement focus est envoyé à un élément lorsqu'il reçoit le focus.
   • Il est implicitement applicable à un ensemble limité d'éléments, tels que des éléments de forme ( <input>, <select>, etc.) et des liens ( <a href>).
   • Dans les versions récentes du navigateur, l'événement peut être étendu pour inclure tous les types d'éléments en définissant explicitement la propriété tabindex de l'élément.
   • Un élément peut recevoir le focus via les commandes du clavier, telles que la touche Tab, ou par des clics de souris sur l'élément.
   • Le jQuery nous offre deux méthodes pour gérer l’événement "prise de focus d'un élément" : les méthodes focus() et focusin() focus() permet d’attacher un gestionnaire d’événement pour l’événement focus.

   • Exemple:

     • Au focus d’une ligne de texte, ajoutons la classe obligatoire.

     

   • La méthode focusin()

     • La méthode focusin() permet d’attacher un gestionnaire d’événement pour l’événement focusin. L’événement focusin est envoyé à un élément lorsque cet élément ou l’un de ses descendants reçoit le focus.

   • La méthode blur()

     • Le jQuery nous offre deux méthodes pour gérer l’événement "perte de focus d’un élément" : les méthodes blur() et focusout() blur() permet d’attacher un gestionnaire d’événement pour l’événement blur. L’événement blur est envoyé à un élément lorsqu'il perd le focus.
     • La méthode blur() déclenche l’événement qui se produit lorsque l’élément perd le focus. Cela a pour effet de déclencher toutes les fonctions associées à cet événement pour les éléments sélectionnés.

   • La méthode focusout()

     • La méthode focusout() permet d’attacher un gestionnaire d’événement pour l’événement focusout.
     • L’événement focusout est envoyé à un élément lorsque cet élément ou l’un de ses descendants perd le focus.

select()

• La méthode select(): se produit lorsque l’utilisateur sélectionne un texte (ou une partie de celui ci).
• Parfois appliqué aux champs de formulaire du type ligne de texte ou zone de texte (textarea).

• Exemple:

  $(':text,textarea').select(function(){
   alert($(this).val());
  });

La méthode change()

• La méthode change() permet d’attacher un gestionnaire d’événement à un élément pour l’événement change. L’événement change se déclenche lorsque la valeur d’un élément change.
• /'événement change ne peut se déclencher qu’avec des éléments input, textarea et select.

submit()

• La méthode submit() permet d’attacher un gestionnaire d’événement à un élément pour l’événement submit.
• L’événement submit se déclenche dès qu’un utilisateur tente d’envoyer un formulaire.

Application

Formulaire de contact
• Créer un formulaire de contact qui contient les champs (HTML5 et bootstrap4) suivants:
  • Prénom
  • Nom
  • Email
  • Téléphone
  • Message
• Créer aussi un bouton de soumission en fin de formulaire.
• Ajouter un événement "onclick" sur le bouton de soumission, appelant une fonction de vérification des champs.
• Créer la fonction de vérification de champs dans le head:
• La fonction doit vérifier les champs suivants :
  • Email: que le caractère '@' soit présent dans le mail, grâce à la méthode includes('');
  • Téléphone: que le nombre de caractères dans le numéro de téléphone soit correct (10), grâce à la propriété length
  • Pour vérifier un champ, assurer vous qu'il a un id, et utiliser un sélecteur pour récupérer l'élément. La fonction .val(); permet de récupér le contenu du champs dans une variable.