JQuery et les formulaires

Les sélecteurs pour les formulaires

Exemple 1

Le code CSS & HTML

... <style> form {width : 98%; border : 1px solid black;} input, button, label, textarea, select,span{display : inline-block ; margin : 1% ; width : 45% ; vertical-align : top; } input[type =radio]{width : 5%;} span {width :15%; } ... <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%;}).

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

On peut sous entendre le mot input donc écrire, par exemple $(":password") !

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

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

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.

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 les nouveaux types de la balise input.
Remplissez ce formulaire !

Le code CSS et HTML correspondant

... <script src ="https://www.google.com/jsapi">Importer jquery à partir de google</script> <script>google.load("jquery","1"); </script> </head> <body> <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 > ...

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é

$("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(); alert(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(); alert(saisie); } );

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

... <style> *{font-size : 14pt ; } form {width : 600px ; border : 1px solid black; margin : 10px auto 10px auto ; } label, input, button {display : inline-block ; width : 44% ; height : 30px ; margin :10px 1% 10px 1% } input:invalid {color : red; } input:valid {color : lime ; } </style> <script src ="jquery.js"></script> </head> <body> ... <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.

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 !


Retour menu