johanBleuzen

Le HTML5 a introduit pas mal de nouveauté dans les formulaires web, de nouveaux «inputs», la validation de ces inputs directement par la navigateur. Parfois même, le navigateur est tellement «performant» qu’il refuse de valider des inputs que l’on voudrait qu’il considère comme valide.
Voici un petit exemple avec Chrome qui fait le difficile avec les inputs de type «number»…

Dernièrement, j’ai été confronté à un petit problème alors que j’avais un formulaire dans lequel l’utilisateur devait saisir un nombre de jour, bien sur l’utilisateur devait être capable de saisir des demi-journée. Chose que l’on peut faire simplement en HTML5 avec une balise input de type number :

<input type="number" min="0" max="31" />

Malheureusement, Chrome ne va pas autoriser l’utilisateur à saisir une demi journée avec un nombre décimal et il va afficher une popup d’erreur à l’utilisateur qui ne comprend pas puisqu’il a saisi une valeur valide :

Si vous pensez, que l’erreur se produit parce que j’ai utilisé une virgule à la place d’un «point», sachez que Chrome supprime la partie décimale du chiffre lorsque l’input perd le focus.

L’attribut step

On peut contourner facilement ce problème en ajoutant l’attribut step avec la valeur any, ainsi il sera possible de saisir tous les chiffres décimaux possible :

<input type="number" min="0" max="31" step="any" />

Avec ce code, Chrome ne pose plus de problème à la validation de l’input. Mais maintenant, je n’ai plus le comportement désiré, les utilisateurs peuvent saisir tous les chiffres décimaux possibles, alors que je voudrais uniquement pouvoir saisir des demis-journées.

Cette fois-ci, il va falloir ajuster la valeur de l’attribut step pour que l’incrément de la valeur du champ corresponde au fonctionnement souhaité :

<input type="number" min="0" max="31" step="0.5" />

Comportement bizarre, dans le HTML il faut saisir la valeur décimale avec un «point» alors que dans le formulaire il faut saisir la valeur décimale avec une «virgule» (et les paramètres linguistique n’ont aucune incidence sur ce comportement)…

Et les autres navigateurs ?

Par curiosité j’ai quelques tests avec d’autres navigateurs :

• Safari a exactement le même comportement que Chrome pour ces inputs.
• Opéra gère parfaitement les inputs de type number et laisse le choix à l’utilisateur d’utiliser une virgule ou un point comme séparateur des entiers et des décimales
• Firefox ne gère pas du tout ces nouveaux inputs qui sont pourtant dans la draft HTML5 depuis pas mal de temps.

Conclusion

Encore une fois les implémentations des éléments HTML5 diffèrent entre les différents navigateurs du marché mais dans ce cas il n’y a pas trop d’incidence, car lorsque le navigateur ne gère pas un input correctement il utilise un input de type text qui est un comportement correct pour un fallback.

De plus je vais faire un petit rappel : ne vous fiez pas uniquement à la validation du navigateur, vérifiez toujours les données saisies par vos utilisateurs côté serveur car un utilisateur de Firefox peut saisir n’importe quelle valeur dans notre exemple…