Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

JQuery et les formulaires

Les sélecteurs jQuery pour les formulaires

Exemple 1

Le code CSS & HTML

Dans la feuille de style tous les éléments de formulaire sont transformés en éléments inline-block (ils sont nativement inline).
Dans le cadre du "responsive web design" la largeur du formulaire et des contrôles de formulaire exprimée en %.
Compte tenu de leur largeur (45%), la légende (balise label) et la zone de saisie correspondante (balise input) se positionnent côté à côte.
Par contre les boutons radio sont légéndés avec la balise span (width : 15%) et ont une largeur de 5% (input[type =radio]{width : 5%;}).

Il faut rappeler que dans un groupe de boutons radio un seul bouton peut être coché. On crée un groupe de boutons radio en donnant le même nom aux différents boutons.

Le script

La méthode val() permet de récupérer la valeur de l'élément de formulaire.

Toutes les valeurs saisies sont concaténées dans la variable saisie.
Remarquez l'emploi de l'opérateur +=. L'expression saisie +=... équivaut à : saisie =saisie + ....

Testez cet exemple

Exemple 2

Faut-il rappeler que dans un groupe de cases à cocher on peut cocher plusieurs éléments.
Dans une liste à choix multiple on peut sélectionner plusieurs options (appui sur la touche CTRL).

Le code HTML

Le script

C'est l'occasion de voir de nouveaux sélecteurs dédiés aux éléments de formulaire.
Si dans un formulaire vous avez plusieurs groupes de boutons radio (ou de cases à cocher) il suffit d'utiliser le nom du groupe comme sélecteur du groupe avec la syntaxe : $("input[name ='nomgroupe']").

Attention aux quotes. Si les quotes extérieures sont doubles alors les quotes qui délimitent le nom du groupe sont simples et vice-versa.

Si vous avez plusieurs listes il faut donner un identifiant à chacune.

Observez bien les sélecteurs employés dans l'exemple :
'input[name="sport"]:checked' : référence toutes les cases à cocher cochées du groupe nommé sport
'#jeux option:selected' : référence toutes les options sélectionnées dans la liste identifiée jeux

Donc on coche (:checked) des cases à cocher ou des boutons radio mais on sélectionne (:selected) des options de liste.

Dans l'exemple comme il peut y avoir plusieurs cases cochées ou plusieurs options de la liste sélectionnées.
Il faut donc dans les deux instructions itérer : each(function(){saisie += " "+$(this).val();})

Comme dans l'exemple précédent toutes les valeurs saisies ou sélectionnées sont concaténées dans la variable saisie.

Testez l'exemple

Jquery et les nouveaux types de champs

De son côté CSS3 n'est pas en reste. De nombreuses nouvelles pseudo-classes pour les éléments de formulaire.

Mais il y a un problème jQuery ne reconnaît pas encore les nouveaux types de la balise input.

Remplissez ce formulaire !

Le code CSS et HTML correspondant

Dans la partie HEAD importation de jQuery à partir de GOOGLE afin d'avoir la dernier version de jQuery.

Emploi des nouveaux types pour la balise input : email, number, tel, range, date

Le script imaginé

Ce script est logique mais il est faux !

jQuery n'a pas intégré les nouveaux types de champs donc les sélecteurs tels que input:email ou input:range, etc. sont invalides !

Le bon script

On aurait pu aussi identifier chaque champ input ...

Les formulaires de soumission

Si l'outil formulaire peut être utilisé pour saisir de façon ergonomique des données en vue d'un traitement JS, il ne faut pas oublier qu'un formulaire sert d'abord à saisir des données destinées à alimenter une base de données (traitement PHP et SQL).

Dans ce cas la balise form contient obligatoirement les attributs action et method.
Le bouton d'envoi doit être de type submit afin que les contrôles de saisie HTML (respect du pattern) s'opèrent !

Imaginons un formulaire d'inscription à un site de rencontres (lol) !

Le code HTML et CSS correspondant

Le bouton d'envoi est bien de type submit.

Dans la balise form on trouve : onSubmit="return fenvoi()"

Donc pour parler français ça veut dire : "si la fonction JS retourne true alors tentative de soumission.
La soumission est effective si les saisies respectent les contrôles HTML !
Donc grâce à cette syntaxe on cumule les contrôles de saisie HTML (attributs required et pattern) mais aussi de ceux prévus par la fonction JavaScript !

Dans le code HTML chaque balise input est identifié dans l'optique du script jQuery.
Chaque balise input a l'attribut required (saisie obligatoire) et l'attribut pattern (contrôle du format de saisie).

Le script

La fonction retourne false si les adresses mail ou les mots de passe sont différents.

Trois tests

Nous allons maintenant tester ce code d'abord avec des trois séries de données.

1 -Saisir des données farfelues :
toto deux fois en guise d'adresse mail et titi deux fois en guise de mot de passe.
La fonction retourne true mais comme les saisies ne correspondent aux pattern associés au champ la soumission est bloquée par HTML !

2 - Saisir des données correctes :
dupont@free.fr deux fois et sesame62 deux fois
La fonction JS va retourner true et comme de plus les saisies correspondent aux pattern, HTML va autoriser la soumission.
Donc la page "inscription_trait.htm" doit s'afficher à l'écran !

3 - Saisir des données incohérentes:
dupont@free.fr deux fois puis sesame59 et sesame62
Cette fois c'est la fonction JS qui bloque la soumission puisque les mots de passe sont différents.

A vous de jouer !

Donc résumons nous !