Les événements des formulaires avec jQuery
Sommaire
Les événements des formulaires avec jQuery
-
Objectifs
- Connaitre les événements spécifiques aux formulaires avec jQuery.
- Savoir utiliser les événements spécifiques aux 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
-
Les méthodes focus() , focusin() ,blur() et focusout()
-
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é
tabindexde 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()etfocusin()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énementfocusinest 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()etfocusout()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:
-
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
changene 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
submitse déclenche dès qu’un utilisateur tente d’envoyer un formulaire. -
Application
- Créer un formulaire de contact qui contient les champs (HTML5 et bootstrap4) suivants:
- Prénom
- Nom
- 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.
| Action | Fonction |
|---|---|
| Focalisation | focus() |
| Sélection (p.e. dans une liste) | select() |
| Changement de valeur | change() |
| Envoi du formulaire | submit() |
$(':text,textarea').select(function(){
alert($(this).val());
});-
Formulaire de contact
