JQuery_logo

130 – JQuery, vous fera gagner du temps !

jQuery est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML des pages web.

On écrit ces scripts, en général pour contrôler que vous saisissiez correctement des formulaires. Comme ces contrôles peuvent se faire sans accéder au serveur, c’est là que nous allons gagner du temps !

JQuery ne se limite pas à cela, il permet aussi :

  • la manipulation de feuilles de styles en cascade (ajout / suppression des classes, d’attributs),
  • utilisation d’Ajax, côté serveur,
  • et bien d’autres choses que vous pourrez découvrir en consultant des sites comme Wikipedia : JQuery.

Nous présenterons dans cet article que la partie contrôle de saisies en l’illustrant par un formulaire d’inscription basique (partie encadrée par la balise <FORM>). Pour que cette partie soit bien interprétée, il faut qu’elle soit encadrée par une partie HTML. Les néophytes trouverons des explications sur ce sujet sur de nombreux sites, comme par exemple Alsa Création :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Votre premiere page HTML 5, sans feuille de style</title>
</head>
<body>
  Formulaire TRES basique pour l'enregistrement d'un membre :

<br />
<form method="post" id="FormSaisie">


<br />
<table>

<br />
<tr>

<td>Nom</td>
<p>

<td><input type="text" name="Nom" placeholder="NOM" required></td>
<p>
</tr>
<p>


<br />
<tr>

<td>Prenom</td>
<p>

<td><input type="text" name="Prenom" placeholder="PRENOM"></td>
<p>
</tr>
<p>


<br />
<tr>

<td>Email</td>
<p>

<td><input type="email" name="Email" placeholder="EMAIL"></td>
<p>
</tr>
<p>


<br />
<tr>

<td>Mot de passe</td>
<p>

<td><input type="password" name="MotDePasse" placeholder="MOT DE PASSE"></td>
<p>
</tr>
<p>


<br />
<tr>
<br />
<td colspan="2" align="right"><input type="submit" name="Soumettre" value="Envoyer"></td>
<p>
</tr>
<p>

</table>
<p>

</form>
<p>
</body>
</html>
Formulaire en HTML 5

Vous noterez que j’ai complètement occulté tout ce qui concerne les CSS. A ce sujet, j’ai rédigé un article sur l’HTML 5 et CSS si cela vous intéresse.

Si on laissait ce code html 5 sans rien de plus, chaque navigateur appliquerait des contrôles, mais pas forcément de la même manière pour indiquer que le nom est obligatoire, que l’adresse mail est incorrectement saisie, etc …

JQExemple-01A

Ce que vous avez avec Mozilla Firefox – version 47 : Veuillez compléter ce champ

Ce que vous avez avec Internet ExplorerJQExemple-01BCe que vous avez avec Internet Explorer 11 : Champ requis

Pour uniformiser tout cela, nous allons utiliser JQuery. La première question qu’il faut se poser c’est où trouver JQuery ? En allant simplement sur le site officiel de JQuery. Vous pouvez le télécharger en local, ou bien faire référence à celui du site officiel :

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
Plugin JQuery

Ces deux lignes de script sont à incorporer dans la partie head du formulaire. Pour l’utiliser, il suffit de créer la fonction suivante :

$().ready(function){
$("FormSaisie").validate(
  {

  });
});
Utilisation du plugin

Si on ne rajoute rien de plus à ce stade, le plugin fonctionnera d’une manière basique; La validation du formulaire ne pourra se faire que si :

  • le nom est bien saisie, car vous aurez relevé le required qui a été indiqué dans le formulaire,
  • l’email aura bien été saisie dans un bon format, car c’est son type qui fera que le plugin fera des contrôles supplémentaires.

De plus s’il y a des erreurs dans ces contrôles, ils seront affichés dans la langue de Shakespeare. Pour l’afficher en Français, il suffit d’ajouter des messages propres à chaque champ, comme suit :

  <script>
  $.validator.setDefaults({
		submitHandler: function() {
			alert("On peut soumettre ce formulaire au serveur !");
		}
	});
  $().ready(function(){
    $("#FormSaisie").validate({
      rules:{
        Prenom:{ minlength:3},
        Nom:{ required:true},
        Email:{required: true, mail:true}
    },
      messages :{
        Nom:"Veuillez fournir un nom",
        Prenom:"Veuillez fournir un prenom d'au moins trois lettres",
        Email:"L'email est incorrect"}
    });
  });
</script>

Et voilà le résultat, lorsqu’on clique sur la touche Entrée :

 

JQExemple-01CVoilà objectif atteint pour cet article : réaliser sur un formulaire de simples contrôles coté client.

En ce qui me concerne, je vous ai montré que je connais le sujet, et l’on peut dire également que mon objectif est atteint. J’aurais pu creuser encore ce sujet sur les autres fonctionnalités de JQuery, ce que je ferais peut-être si j’ai un commentaire qui me solliciterait dans ce sens.

Depuis le début du mois de juin 2016, nous sommes à la version 3 et pas mal d’articles ont été publiés pour savoir s’il était pertinent d’utiliser la dernière version. Je vous invite à lire cet article parmi : JQuery passe en version 3.

Cet article a été vu 12 fois

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

* Copy This Password *

* Type Or Paste Password Here *