Catégorie : jQuery

L'API de WordPress charge la bibliothèque jQuery dans le site Web et dans le tableau de bord. Le code que vous écrivez peut donc utiliser jQuery sans avoir à charger cette bibliothèque, moyennant certaines précautions. Pour jQuery UI, vous devrez effectuer une étape supplémentaire avant de pouvoir l'utiliser. Dans cet article, je vous présente la technique qui vous permettra d'utiliser l'une ou l'autre de ces bibliothèques. (suite…)

La validation d'un formulaire Web côté client est essentielle. C'est elle qui permet d'informer l'usager le plus rapidement lorsqu'il entre des informations invalides.

En fait, les éléments visuels devraient déjà avoir averti l'usager de certaines règles à suivre : astérisque (*) devant les informations obligatoires, texte indiquant le format attendu, taille des zones de texte pour indiquer la taille de ce qui est attendu, etc. Mais ces éléments visuels ne sont qu'indicatifs. Ils n'effectuent pas de validation.

La validation côté client peut être effectuée à l'aide d'attributs HTML ou à l'aide de JavaScript, avec ou sans jQuery.

(suite…)

Grâce à AJAX, il est possible d'exécuter du code serveur (ex : PHP ou C#) à partir d'un appel JavaScript. Ce code peut effectuer n'importe quelle tâche côté serveur pour répondre à nos besoins : valider des informations, effectuer une lecture dans la base de données, ajouter un enregistrement dans une table, manipuler des variables de session, etc. (suite…)

JSON (JavaScript Object Notation) est un format de données indépendant du langage de programmation. Comme il est léger et structuré, il est avantageux de l'utiliser lors de requête AJAX. Le format XML pourrait également être utilisé avec AJAX mais comme il est plus verbeux, on lui préférera JSON. (suite…)

jQuery nous permet de réagir à une touche au clavier grâce aux fonctions keyup(), keydown() et keypress(). Il est même possible de réagir différemment à une touche en fonction de l'endroit où le focus est donné.

L'utilisation la plus courante consiste utiliser la touche Entrée pour soumettre le formulaire qui détient le focus. Il est cependant possible d'aller plus loin en utilisant ces fonctions pour définir des raccourcis-clavier.

(suite…)

Dans un formulaire HTML, il est possible de placer certains contrôles en lecture seule afin d'éviter qu'ils soient modifiés par l'usager. Par exemple, les boîtes de saisie textuelle (<input type="text"> et <textarea>) peuvent être mises en lecture seule grâce à l'attribut readonly. Ceci permet au contrôle de recevoir le focus et ne modifie pas son apparence, tout en empêchant la modification de son contenu.

Malheureusement, l'attribut readonly n'est pas disponible pour les listes déroulantes (<select>).

Je vous présente dans cet article une astuce pour simuler un readonly sur une liste déroulante.

(suite…)

La validation est un aspect important de la programmation d'un formulaire Web.

La validation doit comprendre trois volets :

• Dès que l'usager voit le formulaire, il doit connaître les éléments de validation qui seront effectués : * devant les informations obligatoires, texte qui indique le format attendu pour un téléphone, etc. Ces éléments peuvent être affichés à l'aide de libellés, à l'aide de bulles d'aide ou encore à l'aide de watermarks.

  

• Une validation doit être effectuée côté client afin que l'usager soit informé des éléments à corriger dès que l'information est entrée. Cette validation peut être effectuée à l'aide d'attributs HTML5, de JavaScript ou de contrôles serveur de validation ASP.NET.
• Et finalement la validation doit être effectuée côté serveur afin d'assurer que les informations invalides ne puissent pas être acceptées dans le cas où l'usager aurait désactivé JavaScript sur son navigateur. Les contrôles serveur de validation se chargent d'effectuer la validation côté serveur mais le développeur doit prendre quelques précautions pour empêcher l'enregistrement des informations en cas de valeurs non valides. Il est à noter que les validations HTML5 auront lieu même si JavaScript est désactivé.

(suite…)

Les instructions JavaScript, avec ou sans jQuery, peuvent être écrites directement dans la page Web. Elles peuvent également être placées dans un fichier .js..

Quelle approche est préférable ? Il y a différentes écoles de pensées à ce sujet. Une chose est certaine : si le code JavaScript doit être utilisé sur plus d'une page Web, l'utilisation d'un fichier .js permettra de ne l'écrire qu'une seule fois.

Dans tous les cas, ce sont les balises <script> et </script> qui indiqueront au navigateur que le code qu'elles contiennent est un script. 

Mais où doit-on placer ces balises ? C'est ce que nous allons voir.

(suite…)

Avec jQuery, la méthode .dialog() permet de transformer une simple division en boîte de dialogue, aussi appelée popup.

La boîte de dialogue peut se décliner en différentes versions :

• boîte avec un bouton OK;
• boîte avec des boutons qui mèneront à différentes actions, comme par exemple une boîte de confirmation avec un bouton Oui qui mène à la suppression d'un enregistrement et un bouton Non qui annule l'opération;
• boîte qui s'affiche pendant quelques secondes avant de disparaître;
• boîte qui apparaît quand on passe la souris sur un élément et qui disparaît quand la souris quitte cet élément;
• etc.

(suite…)

Lorsqu'un site Web doit saisir une date, le travail des internautes et le travail de validation du formulaire seront facilités par l'affichage d'un calendrier. 

En attendant que tous les navigateurs supportent le contrôle de calendrier de HTML 5, jQuery offre un datepicker qui s'occupe de ce travail.

Voyons comment intégrer ce contrôle dans un formulaire Web.

(suite…)