JQuery et les formulaires

Les sélecteurs jQuery pour les formulaires

input qui référence tous les champs
input:text qui référence les champs texte (input type = "text")
input:password qui référence les champs mot de passe (input type ="password")
input:radio qui référence tous les boutons radio (input type ="radio")
input:checkbox qui référence toutes les cases à cocher (input type = "checkbox")

Exemple 1

Le code HTML

...
<form>
	<input type ="hidden" value ="formulaire inscription"/>
	<label>Tapez le mot de passe reçu par mail</label>
	<input type="password"  maxlength="6" />
	<label>Votre Pseudo :</label><input type="text" />
	<label>Confirmer le pseudo :</label><input type="text" />
	
	<span>Monsieur :</span>
	<input type="radio" name="civilite" value="Msieur" checked />
	<span>Madame :</span>
	<input type="radio" name="civilite" value="Mme" />
	<span>Mademoiselle :</span>
	<input type="radio" name="civilite" value="mlle" />
	<br>
<label>Votre tranche d'âge </label>
<select id ="age">
  <option value ="T1">-20 ans</option>
  <option value ="T1">20 à 39</option>
  <option value ="T1">40 à 59</option>
   <option value ="T4">60 et +</option>
</select>
<label></label>
<button onclick ="finfos()">Validez</buttton>
</form >
...

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%;}).

un champ masqué (input type ="hidden")
un champ "password"
deux champs texte
un groupe de boutons radio
une liste déroulante (balise select incluant des balises option) identifiée age.
un bouton de commande qui appelle la fonction jQuery finfos()

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

function finfos()
{
	var saisie ="nature envoi :" ;
	saisie += $("input:hidden").val();
	saisie +=" mot de passe :" ; 
	saisie += $( "input:password").val();
	saisie +=" pseudo :" 
	saisie += $("input:text:eq(0)").val();
	saisie +=" civilité :" ; 
	saisie += $("input:radio:checked").val();
	saisie += " tranche d'âge :" ; 
	saisie += $("#age").val();
	alert(saisie); 
}

input:hidden qui référence le champ "hidden" unique
input:password qui référence le champ "password" unique
input:text:eq(0) qui référence le premier champ texte
input:radio qui référence tous les boutons radio du groupe unique
input:radio:checked qui référence le bouton radio coché dans le groupe unique
$("#age") qui référence la liste déroulante unique. En effet le sélecteur :select n'existe pas en Jquery. Il faut donc identifier chaque liste du formulaire et utiliser cet ID dans le code jQuery.

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

Le rendu dans un cadre :

Exemple 2

un groupe de cases à cocher
une liste à choix multiple

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

<form>
	<input type ="hidden" value ="fiche renseignements -folio 2" id ="masque"/>
	<label>Votre Pseudo :</label><input type="text" />
	
<label>Sports pratiqués :</label><br>
	<span>football :</span>
	<input type="checkbox" name="sport" value="foot" />
	<span>tennis :</span>
	<input type="checkbox" name="sport" value="tennis" />
	<span>natation :</span>
	<input type="checkbox" name="sport" value="natation" />
	<span>jooging :</span>
	<input type="checkbox" name="sport" value="jooging" />
	<span>autres :</span>
	<input type="checkbox" name="sport" value="autres" />
	<span>aucun :</span>
	<input type="checkbox" name="sport" value="aucun" />
	
<br><label>Jeux de cartes pratiqués :</label>
<select id ="jeux" multiple>
   <option value ="belote">belote</option>
   <option value ="tarot">tarot</option>
   <option value ="bridge">bridge</option>
   <option value ="poker">poker</option>
   <option value ="autres">autres</option>
   <option value ="aucun">aucun</option>
</select>

<label></label><button onclick ="finfos()">Validez </button>
</form >

un groupe de cases à cocher nommé sport
une liste à choix multiples (attribut multiple) identifiée jeux

Le script

function finfos() 
{
var saisie ="pseudo :" 
saisie += $(":text").val();
saisie += " sports : "; 
$('input[name="sport"]:checked').each(function(){saisie += " "+$(this).val();}); 
saisie += " jeux de carte : "; 
$('#jeux option:selected').each(function(){saisie += " "+ $(this).val();}); 
alert(saisie);
}

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.

Le rendu dans un cadre ;

Jquery et les nouveaux types de champs

nouveaux types de champs
nouveaux attributs pour les champs de saisie

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.

Le code HTML correspondant

...
<h1>Réservation en ligne à un centre de vacances </h1>
<form>
	<input type ="hidden" value ="formulaire de réservation" />
	<label>Nom et prénom</label>
	<input type="text"  />
	<label>Adresse mail</label>
	<input type="email" />
	<label>Numéro de téléphone</label>
	<input type="tel" maxlength ="10" />
	<label>Date de début de la réservation</label>
	<input type ="date" />
	<label>Durée de la réservation (en jours) </label>
	<input type ="number" />
	<label></label><button>Validez </button>
</form >
...

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

Le script imaginé

$("button").click(function() 
{
	var saisie ="nature envoi :" ;
	saisie += $("input:hidden").val();
	saisie += " nom et prénom :";
	saisie += $( "input:text").val();
	saisie += " adresse mail : ";
	saisie += $("input:email").val();
	saisie +=" téléphone :" ;,
	saisie += $("input:tel").val();
	saisie += " date début :" ; 
	saisie += $("input:date").val();
	saisie += " durée ( en jours) :" ; 
	saisie += $("input:number").val();
	document.write(saisie); 
} );

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

$("button").click(function() 
{
	var saisie ="nature envoi :" ;
	saisie += $("input:hidden").val();
	saisie += " nom et prénom :";
	saisie += $( "input:eq(1)").val();
	saisie += " adresse mail : ";
	saisie += $("input:eq(2)").val();
	saisie +=" téléphone :" ; 
	saisie += $("input:eq(3)").val();
	saisie += " date début :" ; 
	saisie += $("input:eq(4)").val();
	saisie += " durée ( en jours) :" ; 
	saisie += $("input:eq(5)").val();
	document.write(saisie); 
} );

Le rendu de la bonne version dans un Iframe :

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 correspondant

...
<form action = "inscription_trait.htm"  method ='post' onsubmit ="return fenvoi()" >
	<p>Dès qu'une saisie est valide le texte devient vert !</p>
    <label>Tapez votre adresse mail : </label>	
	<input type = "email" required placeholder = "n'oubliez pas @" id ='mail1'>
	 <label>Confirmez votre adresse mail : </label>	
	<input type = "email" required id ='mail2'>
	<label>Saisissez mot de passe :</label>
	<input type = "password" required  pattern ='[A-z0-9]{6,8}' 
		maxlength ='8' placeholder = 'entre 6 et 8 lettres ou chiffres' id ='passe1'>
	<label>Confirmer le mot de passe : </label>
	<input type = "password" required  pattern = '[A-z0-9]{6,8}'  
		maxlength ='8' id ='passe2' >
   	 <button type ="submit">Envoi</button>
</form>
...

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

function fenvoi()
{
	var mail1 = $("#mail1").val();
	var mail2 = $("#mail2").val();
	var passe1= $("#passe1").val();
	var passe2= $("#passe2").val();

	if(mail1 != mail2) {alert("adresses mail différentes") ; return false ;}
	if(passe1 != passe2) {alert("mots de passe différents") ; return false ;}
}

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

Tests à effectuer

Nous allons maintenant tester ce formulaire 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.

Effectuez les tests !

Conclusion

un bouton de type submit
emploi des attributs required et pattern dans les champs obligatoires
dans la balise form appel de la fonction sous la forme : onsubmit ="return fonctionJS()"

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

JQuery et les formulaires

Les sélecteurs jQuery pour les formulaires

Exemple 1

Le code HTML

Le script

Exemple 2

Le code HTML

Le script

Jquery et les nouveaux types de champs

Le code HTML correspondant

Le script imaginé

Le bon script

Les formulaires de soumission

Le code HTML correspondant

Le script

Tests à effectuer

Conclusion