Validation sur des formulaires complexes
J'ai un formulaire Web complexe dans CMS qui se compose de: quelques onglets; différents éléments sur chaque onglet; volet des propriétés; volet des composants. Le problème avec la validation est que tous les éléments de l'interface utilisateur ne sont pas affichés à tout moment. Alors, quand dois-je afficher les messages d'erreur et comment ils doivent changer le comportement du formulaire? Options:
- valider chaque entrée en appuyant sur une touche. Selon les réponses à cette question , c'est une mauvaise idée et je suis d'accord.
- valider chaque entrée en la quittant. Le problème est que le congé a un certain nombre de façons d'exécuter et de planter des résultats possibles. Par exemple, le congé se produira lorsque vous appuyez sur la touche 'tabulation', ou cliquez quelque part sur le formulaire, ou commencez à faire glisser un nouvel élément de la boîte à outils, ou à soumettre un formulaire, ou à sélectionner un autre onglet dans le concepteur, etc. Gérer la validation et désactiver toutes ces actions est extrêmement difficile à mettre en œuvre et sujet aux erreurs.
- valider sur l'envoi du formulaire. Le problème est que toutes les erreurs ne peuvent pas être affichées car un seul onglet est actif et une erreur peut être présente sur différents onglets.
Veuillez suggérer comment implémenter la validation dans ce cas.
MISE À JOUR: Merci pour les réponses actuelles, mais la plupart d'entre elles proposent de désactiver la sélection des onglets, donc je pense que je n'ai pas expliqué le problème assez clairement. Le changement d'onglet n'est qu'une façon de changer le contexte de la page. Chaque onglet contient des accordéons avec des contrôles sur eux. Chaque accordéon, onglet, contrôle a son propre volet de propriétés avec différentes règles de validation. Donc, si je restreins toutes les navigations jusqu'à ce que les propriétés soient entrées, je pense que ce ne sera pas une bonne expérience utilisateur. C'est presque la même chose que d'interdire de quitter le contrôle d'entrée jusqu'à ce qu'il soit valide.
Vous devez valider chaque entrée en quittant le champ, mais utilisez cette validation pour définir les options futures qui n'ont pas encore été atteintes.
Si l'utilisateur choisit l'option C dans le champ 2, par exemple, et cela signifie que plusieurs onglets plus tard, le champ 67 n'a que deux options disponibles (ou doit être entièrement grisé car non pertinent), puis définissez le champ 67 comme requis lorsque le champ 2 est validé.
De cette façon, vous ne validez pas vraiment du tout: vous n'avez pas besoin de vérifier que l'utilisateur a bien rempli le champ 67 avec le champ 2, car il n'a pas la possibilité de faire autre chose.
Gardez le bouton Soumettre final grisé jusqu'à ce que le formulaire soit réellement dans un état soumis.
Cela signifie que le formulaire doit avoir plus d'aide disponible. Vous n'utilisez pas un message de validation comme [sur le champ 67] "Vous ne pouvez pas choisir B ici parce que vous avez choisi C dans le champ 2"; à la place, vous en avez un? (comme le bouton Aide ici) qui explique pourquoi seul un ensemble limité d'options est disponible.
Avoir un bouton "suivant" à la fin de chaque section à onglets pour passer à la suivante. De cette façon, vous pouvez valider chaque onglet avant de passer au suivant. Pour que cela fonctionne correctement, le bouton "suivant" devrait être le seul moyen de continuer (les onglets ne devraient pas être cliquables).
Je suis d'accord avec vous sur les options 1 et 2.
Utilisez la troisième option (validez sur le formulaire de soumission). Mais validez vos champs lors du changement d'onglets.
Ainsi, lorsque vous soumettez le formulaire, seul l'onglet visible actuel doit être validé et les autres onglets sont validés lorsque l'utilisateur accède aux autres.
Par exemple, l'utilisateur saisit des valeurs dans le premier onglet affiché et souhaite accéder au deuxième onglet. La fonction de validation est exécutée et empêche les utilisateurs d'accéder au nouvel onglet. A moins qu'il ne corrige son erreur.