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.

Commentaires

  1. a

    rien ne marche

Ajouter un commentaire