Les événements des formulaires avec jQuery

Les événements des formulaires avec jQuery

  1. Objectifs

    • Connaitre les événements spécifiques aux formulaires avec jQuery.
    • Savoir utiliser les événements spécifiques aux formulaires avec jQuery.
  2. 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()



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

        Les événements des formulaires avec jQuery

      • 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.
  4. 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());
        });
  5. 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.
  6. 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.
  7. 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.

Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement