Alignement des champs avec des étiquettes d'erreur
Je recherche des solutions possibles qui pourraient être utilisées pour améliorer l'aspect de nos formulaires lors de l'affichage des erreurs.
Notre application utilise le thème intranet du gouvernement du Canada (WET 4) avec bootstrap. L'image ci-dessous est un exemple de l'une de nos nombreuses formes dans cette application.
Nous cherchons à voir ce que les autres pensaient à ce sujet car nous avons considéré beaucoup d'idées mais ne pouvons nous mettre d'accord sur rien.
Existe-t-il une meilleure façon de concevoir le flux de ces champs de sorte que lorsqu'il y a des erreurs sur la page, les champs ne semblent pas être partout au hasard.
En me référant aux commentaires sur vos questions, je ne suis pas d'accord avec votre évaluation (que le fait de placer des messages sous les champs est mauvais pour la convivialité), et je pense que @timster est à l'argent.
Mettez le message d'erreur sous les entrées ou utilisez des drapeaux encapsulés
C'est sans doute plus conventionnel que de les mettre au-dessus. Cette question Quelle est la meilleure pratique pour concevoir des messages d'erreur de formulaire? traite le problème de manière approfondie, et mettre les erreurs ci-dessus n'est pas considéré comme une option viable.
Mettre le message au-dessus de l'entrée, comme vous le trouvez, sépare l'entrée de l'étiquette , ce qui fait que l'entrée "flotte" ou semble détachée à partir de la grille visuelle, et lorsque vous en avez plusieurs instances, cela peut sembler un peu chaotique.