Plugin jQuery validation : vérifier l’unicité d’un champ

Le plugin de validation jQuery propose une fonction de validation « à distance » en AJAX, utile par exemple pour vérifier l’unicité d’un login (cf. documentation).

Dans le cas d’un login pouvant être modifié par l’utilisateur il est nécessaire de n’appliquer la règle de validation que si celui-ci change. Imaginez un formulaire d’édition des informations d’un utilisateur enregistré en base où l’on peut modifier le login et le mot de passe. Dans le cas où le login ne change pas le formulaire ne passe pas la validation car le login est déjà pris… par la personne qui modifie ses informations.

Pour contourner ce problème j’utilise l’option « depends » qui permet de déclencher une règle de validation uniquement si la dépendance est correcte.

$('#myInput').rules('add', {
	required: true,
	remote: {
		param: {
			url: 'http://url/vers/ma/fonction/de/verification',
			type: 'POST'
		},
		depends: function(el) {
			return $(el).val() != loginValue;
		}
	}
}

« loginValue » est une variable contenant le login actuel, login qui provient du champ texte et qui est stocké à l’initialisation de la page. Si le login actuel est différent du login présent dans l’input lorsque la validation s’effectue, « depends » renvoie « true » et la vérification AJAX s’effectue.

Notez que contrairement à la documentation les paramètres sont passé dans un objet « param ». Après le contournement du bug des classes multiples c’est ici un nouveau bug. Si vous utilisez « depends » dans « remote » les paramètres de l’appel AJAX ne sont pas pris en compte, à moins de passer un nouvel objet « param ».

Sélectionner ou désélectionner toutes les checkboxes avec jQuery

On trouve de nombreux bouts de code permettant, à partir d'une checkbox maître, de sélectionner ou désélectionner toutes ses checkbox enfant, mais beaucoup d'entre eux contiennent de trop nombreuses lignes inutiles.
Voici ce que j'utilise :
$('#checkAll').click(function(){
	$(':checkbox').attr('checked', $(this).attr('checked'));
});

Il vous suffit juste d'adapter les sélecteurs a vos besoins.

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.

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 »