Validation d’un champ décimal avec virgule ou point sous JQuery
Si vous suivez mon compte twitter vous avez peut être vu passer un petit #WTF sur un problème que j’ai rencontré dernièrement avec JQuery et la validation de formulaire:
JQuery avec son plugin JQuery Validator permet, en autre chose, de vérifier si un champ d’un formulaire est bien un nombre, si il n’est pas trop petit, ni trop grand, etc …
Mais c’est là qu’il y a un Hic ! La validation sur les nombres fonctionne tant que vous ne saisissez pas un nombre avec ….. UNE VIRGULE !
Et oui … Il semble qu’un bug (ou une régression ?) existe dans la version 1.8.1 du Plugin JQuery Validator à ce sujet.
La solution que je vous propose et, qui est une adaptation de la solution donnée sur ce blog, est de surcharger les méthodes de validation.
Pour ce faire, créer un fichier JS que vous appellerez jquery.validate.fixes.js, et garnissez le de ce code :
/*
* Fix JQuery Validation issue 188
* https://github.com/jzaefferer/jquery-validation/issues/188
*/
$.validator.methods.range = function (value, element, param) {
return this.optional(element) || (safeStringToFloat(value) >= param[0] && globalizedValue <= param[1]);
}
$.validator.methods.min = function (value, element, param) {
return this.optional(element) || safeStringToFloat(value) >= param;
}
$.validator.methods.max = function (value, element, param) {
return this.optional(element) || safeStringToFloat(value) <= param;
}
safeStringToFloat = function (value){
return parseFloat(value.replace(",", "."));
}
$.validator.methods.number = function (value, element) {
return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/.test(value);
}
Il ne vous reste plus qu’a l’appeler dans votre page :
<script type="text/javascript" src="jquery.validate.fixes.js" />
Pour la petite explication la solution consiste à ajouter ‘,’ dans le regex qui valide le format de nombre (ligne 21) et ajouter une fonction de conversion qui permet de convertir une chaîne de caractère en float même avec une ‘,’ (ligne 17). L’avantage de cette solution c’est qu’elle patch l’anomalie de JQuery et vous permettras de garder ce fixe même quand vous mettrez à jour JQuery et/ou Jquery validate.
.