jQuery Validation : contourner le bug des classes multiples sur les labels

Le plugin de validation jQuery est sans doute le plus utilisé par les développeurs lorsqu’il s’agit de valider un formulaire. Il est simple à mettre en place mais comporte cependant quelques bugs, notamment celui des classes multiples sur la balise contenant les erreurs (un label par défaut).

Lorsque des erreurs sont détectées dans le formulaire, par défaut le plugin ajoute une balise label contenant l’erreur en dessous du champ incriminé. Il est possible, via l’option « errorClass » du plugin, de changer la classe du label qui est de base « error ». Le problème apparaît lorsque l’on désire ajouter non pas une, mais plusieurs classes à notre label, comme suit :

$("form").validate({ errorClass: "foo bar lol" });

Les classes sont correctement ajoutées à la balise mais dès que l’on tente de soumettre le formulaire comportant des erreurs, ou dès que le focus d’un champ comportant une erreur est perdu, un nouveau label est généré.

Après trois tentatives de soumission voici ce que l’on peut voir :

La solution pour contourner ce problème est relativement simple : il faut positionner le label dans le html sans l’aide du plugin, labels auquels sont rattachées nos différentes classes, et les cacher à l’aide d’un « display: none » :

<p>
	<label for="cname">Name</label>
	<em>*</em><input id="cname" name="name" class="required" />
	<label for="cname" class="foo bar lol" style="display: none;"></label>
</p>

Une fois cette opération faite, on surcharge les méthodes qui nous intéressent afin non plus de générer les labels d’erreurs par le plugin, mais seulement les messages.

$('form').validate({
	errorPlacement: function(error, element)
	{
		$('label', $(element).parent()).html(error.text());
	},
	highlight: function(element)
	{
		$('label', $(element).parent()).show();
	},
	unhighlight: function(element)
	{
		$('label', $(element).parent()).hide();
	}
});

Attention, il y a de fortes chances pour que vous deviez adapter les sélecteurs jQuery.

Cette solution n’est pas parfaite, mais en attendant un correctif je n’ai rien trouvé de mieux.

Les calendriers de l’avent du développeur web

Les fêtes de Noël sont peut-être la période de l’année la plus fructueuse en terme de publication d’articles de qualités pour les développeurs web. En effet, nous avons le droit à plusieurs calendriers de l’avent sur des langages ou thèmes spécifiques.
Contrairement aux calendrier en chocolat, ceux listés ci-dessous sont réutilisables et non périssables. Ils suivent néanmoins le même principe : un nouvel article par jour, du 1er décembre jusqu’au réveillon de Noël (pour la plupart).

Cette liste est quasi exclusivement constituée de sites traitant du front-end, à l’exception du dernier. Il existe d’autres calendriers de l’avent tels que Adfont Calendar ou encore Perl Advent Calendar.

  • 24 ways : sans aucun doute le plus connu de tous, 24 ways couvre un très large panel de sujets (design, développement, écrivains, etc.).
  • Performance Calendar : traite, comme son nom l’indique de la performance de votre application ou site web.
  • MDN Holidays calendar : est le calendrier de Mozilla. Contrairement aux autres celui-ci ne possède aucun contenu exclusif, il ne fait que référencer des articles publiés sur d’autres sites.
  • HTML5 and CSS3 Advent : recense des articles rédigés par Digitpaint, agence de développement web hollandaise. On y traite principalement de CSS3 et beaucoup moins de HTML5.
  • PHP Advent : place maintenant au back-end avec PHP Advent. On y retrouve des articles très techniques mais aussi des articles plus généralistes, sur l’évolution de PHP ou l’univers qui gravite autour.

Créer un carrousel d’articles sélectionnés sous WordPress avec jQuery

On retrouve de nombreux tutoriaux décrivant la façon de réaliser un carrousel sous WordPress avec jQuery. Ce qui m’embête dans ces articles est le fait qu’à chaque fois l’utilisation d’une catégorie réservée aux articles sélectionnés est nécessaire. Dans ce tutoriel la méthode utilisée diffère quelque peu : l’image affichée correspond à la miniature de l’article, gérée par WordPress. Si un article dispose d’une image, celui-ci apparaîtra dans le carrousel.

Pour ceux qui ne savent pas ce qu’est un carrousel, c’est dans notre cas des images qui défilent. Vous pouvez en voir un exemple sur le blog Aptonia.

Lire le reste de cet article »

Configurer vsftpd avec des utilisateurs virtuels

vsftpd est peut-être le serveur FTP le plus connu. Il propose deux gestions des utilisateurs différente. La première méthode est la plus simple et se base sur les utilisateurs locaux de votre système. La seconde méthode, un peu plus complexe à mettre en place est elle basée sur des utilisateurs virtuels. C’est sur cette dernière que nous nous attarderons.

Il existe de nombreux avantages à utiliser des utilisateurs virtuels plutôt que des utilisateurs locaux :

  • une gestion plus simple des comptes FTP ;
  • une sécurité accru (pas d’accès SSH possible) ;
  • l’accès au même dossier par plusieurs utilisateurs différents ;
  • etc.

Lire le reste de cet article »