Validation générique du formulaire côté client
Je suis l'auteur du plug-in de validation de formulaire jQuery , que j'ai commencé à écrire en 2006. Depuis, j'ai déployé des efforts considérables pour améliorer l'interaction par défaut, sans que le développeur utilisant le plug-in ait à personnaliser n'importe quoi. L'effort est bien dépensé, car il a permis aux développeurs n'ayant aucune formation en conception d'interaction d'obtenir de solides améliorations sur leurs formulaires.
J'espère rassembler ici quelques suggestions d'améliorations supplémentaires. Si vous êtes dedans, commencez par jouer un peu avec les démos par défaut .
Le comportement que vous y verrez est décrit ici , pour citer: Par défaut, les formulaires sont validés lors de la soumission, déclenchés par l'utilisateur en cliquant sur le bouton Envoyer ou en appuyant sur Entrée lorsqu'une entrée de formulaire est focalisée (option sursoumettre). De plus, une fois qu'un champ a été mis en surbrillance comme non valide, il est validé chaque fois que l'utilisateur tape quelque chose dans le champ (option onkeyup). Lorsque l'utilisateur saisit un élément non valide dans un champ valide, il est également validé lorsque le champ perd le focus (option onblur).
Le but de ces interactions est de fournir un retour d'information le plus tôt possible, tout en évitant de déranger les utilisateurs. L'affichage de messages d'erreur avant que l'utilisateur n'ait même pu saisir quelque chose n'est pas utile.
Un problème que quelqu'un a récemment noté est le suivant: (recommencer à zéro, puis) concentrer un champ, taper quelque chose dedans, le supprimer, tabuler hors du champ. Dans ce cas, même si le champ est obligatoire, le plugin ne le dira pas. Que quelqu'un a suggéré de changer cela et d'activer la validation la plus "agressive" dès que quelqu'un a commencé à taper dans un champ. Je n'en suis pas si sûr.
Un problème plus complexe est celui de l'affichage des messages d'erreur. Le plugin peut être personnalisé assez lourdement, comme on le voit dans cette Démo Marketo . Ici, les messages en ligne ne sont affichés que pour les règles autres que celles requises, par exemple. saisir "foobar" comme adresse e-mail afficherait "Veuillez saisir une adresse e-mail valide, par exemple: [email protected]" à côté de ce champ, mais sinon seulement "Vous avez manqué 12 champs. Ils ont été mis en évidence ci-dessous". s'affiche en haut tandis que les champs sont mis en évidence par une bordure rouge. Bien que cela fonctionne bien dans cette conception spécifique, je doute qu'il soit possible d'en faire la valeur par défaut pour la validation de formulaire générique qui fonctionne partout.
Avoir une bonne valeur par défaut est certainement important, car même les sites plutôt populaires ont tendance à copier le code de démonstration et à l'utiliser tel quel.
Dans l'attente de vos suggestions et d'une bonne discussion! Faites-moi savoir si je dois mettre des questions spécifiques dans des questions distinctes.
Fournissez à l'utilisateur une sorte de confirmation que son entrée a été acceptée et validée correctement. De nombreuses interfaces utilisateur utilisent le simple "tick" ajouté après le champ de saisie pour afficher ce
Permettre aux utilisateurs de savoir ce que le champ de saisie exige d'eux via une sorte de repère basé sur la conception (par exemple, une valeur par défaut qui s'efface)
Si je suis un utilisateur qui sait ce que l'on attend de moi (par exemple, un nom d'utilisateur de plus de 2 caractères), je suis moins susceptible d'essayer de saisir une entrée non valide en premier lieu. Cela peut prendre la forme d'une valeur par défaut pour le champ qui s'efface automatiquement en entrée.
Entrez votre adresse e-mail: [Exemple: [email protected]] (Efface le focus)
Cette valeur par défaut peut être extraite du champ "valeur" du champ ou générée côté client en fonction des règles requises. Cela dépend de la quantité de travail que vous voudrez y consacrer.
- Certaines interfaces utilisateur introduisent maintenant un graphique qui apparaît dans le coin supérieur du champ de saisie en cours de validation pour montrer aux utilisateurs qu'il est requis (ce qui diffère du dénoteur traditionnel *) mais est tout aussi efficace.
J'espère que ces aides,
Addy
AddyOsmani.com
Il y a un très bon article de Luke Wroblewski sur A List Apart: Inline Validation in Web Forms . Il indique que l'utilisation de la validation lors de la frappe entraîne des délais de préparation des formulaires plus longs et des frustrations.
Je suggère la conception du formulaire Web du livre de Luke Wroblewski ( Amazon , Google Books ). Il détaille les messages d'erreur, la validation, l'aide et tous les sujets liés aux formulaires Web.