Impressionnez vos visiteurs Web avec la validation de formulaire en temps réel

formulaire en ligne

La première impression que vous avez généralement en tant qu'utilisateur d'une application Web est lorsque vous remplissez un formulaire Web. Je suis étonné du nombre de formulaires Web qui n'ont aucune validation ou qui attendent que vous soumettiez le contenu de votre formulaire avant de vous indiquer les problèmes que vous pourriez avoir.

Ma règle de base est que tout ce qui n'est pas validé est pris en charge. Tout ce qui peut être validé avant de soumettre le formulaire doit l'être. Avec l'avènement d'Ajax, vous pouvez même valider les données par rapport à votre base de données avant de les soumettre. Ne choisissez pas la voie paresseuse - les utilisateurs apprécient l'aide!

Voici quelques exemples:

  1. Adresses e-mail - Les formulaires qui vous obligent à remplir votre adresse e-mail deux fois pour les valider ne me dérangent pas, mais le fait qu'ils ne vous disent pas s'ils correspondent ou non ou s'ils sont construits de manière appropriée est inexcusable.
  2. mots de passe - Si vous allez me faire taper un mot de passe deux fois, veuillez valider que les valeurs sont les mêmes avant de poster le formulaire.
  3. Fiabilité du mot de passe - Si vous avez besoin d'une certaine force de mot de passe (combinaison de caractères alphanumériques ou de majuscules), faites-moi part de vos commentaires pendant que je saisis mon mot de passe. N'attendez pas que je soumette avant de me dire qu'il a échoué.
  4. Dates - Si vous souhaitez la date au format am / j / aaaa, permettez-moi de saisir les informations dans un seul champ en tapant ces valeurs et en les formatant de manière appropriée. Si vous voulez des zéros non significatifs, insérez-les après. Il est normal d'afficher un format et d'en enregistrer un autre dans votre base de données.
  5. La date d'aujourd'hui - Remplissez-le pour moi! Pourquoi me demandez-vous de renseigner la date alors que vous la connaissez déjà?!
  6. Format de la date - Si vous avez une demande internationale, vous pouvez par défaut un format de date basé sur l'internationalisation de votre application. Bien sûr, il est bon d'avoir une option permettant aux utilisateurs de remplacer cette option et de sélectionner la leur.
  7. Numéros de sécurité sociale - il est assez simple d'ajouter du javascript qui saute automatiquement d'un champ à l'autre ou de placer un tiret par programmation entre les valeurs.
  8. Numéros de téléphone - en tenant compte de l'internationalisation, ces types de champs peuvent également être simplifiés en formatant le numéro de téléphone dans l'interface, mais en l'enregistrant dans un autre format efficace pour votre back-end. Ne faites pas entrer vos utilisateurs entre parenthèses, espaces et tirets.
  9. Longueur maximale du texte - si vous limitez le nombre de caractères stockés dans votre base de données, alors ne me laissez pas taper autant de caractères! Cela ne nécessite même pas de validation difficile… c'est juste un paramètre sur la zone de texte.
  10. Longueur minimale du texte - si vous avez besoin d'une longueur de texte minimale, faites retentir l'alarme jusqu'à ce que j'aie suffisamment de caractères.

Voici un exemple de fonction Force du mot de passe de Geek Sagesse:

Tapez le mot de passe:

MISE À JOUR: 10/26/2007 - J'ai trouvé une ressource intéressante avec une bibliothèque JavaScript disponible en téléchargement pour validation de formulaire, appelée LiveValidation.

16 Commentaires

  1. 1

    Je suis d'accord que ce sont d'excellentes fonctionnalités pour les formulaires, mais dire qu'il est «inexcusable» de ne pas effectuer de validation javascript frontale est davantage une opinion personnelle. J'adore travailler en javascript et j'ai écrit des masques d'édition assez soignés pour faire certaines des choses dont vous parlez, mais beaucoup d'entre eux sont loin d'être triviaux, et de nombreux packages de validation de formulaires javascript ont un certain nombre de gros trous. Tout le monde n'investira pas le temps dans la duplication de leur validation back-end avec (le plus souvent) une validation javascript front-end plus complexe.

    Bons points, mais certainement pas quelque chose que chaque formulaire en ligne «a besoin» à mon avis.

  2. 2

    Le vérificateur de mot de passe est relativement cassé. Tout mot de passe est assez bon s'il est long.

    Mise en situation :

    Est-ce vraiment un mot de passe médiocre?

    f46dffe6ff4ffgdfgfjfgyu656hfdt74tyhdtu5674yfgh6uhhye45herdhrt64684hythdfth54y54348fgdcvzse8cn984v3p4m6vq98476m3wuw89ewfucsd8fg67s4v8tw76u340m6tver7nt+s89346vs+0em9u+s+09hrtuhss586ysvne4896vb4865tbv089rt++

  3. 4

    Pour moi, la meilleure validation de formulaire est lorsque vous donnez à l'utilisateur l'impression d'une validation côté client alors qu'il s'agit d'une validation côté AJAX / serveur.
    Vous devez simplement attacher à vos éléments de formulaire une gestion des événements (keyup, flou, clic, etc…) qui publie l'intégralité du formulaire via AJAX sur le serveur, en invoquant une fonction «check» qui renvoie les messages d'erreur correspondants (ce mot de passe l'est aussi simple, cette date n'est pas au format, etc…)
    Lorsque l'utilisateur publie enfin le formulaire en cliquant sur un bouton d'envoi, vous pouvez toujours utiliser la fonction côté serveur «vérifier» pour valider une dernière fois le formulaire avant d'insérer les données dans une base de données ou un autre processus.
    De cette façon, les utilisateurs sont satisfaits de la validation sur google ET les développeurs sont satisfaits du développement de validation uniquement côté serveur.

    • 5
      • 6

        Pas si vite Doug - Je suis d'accord avec votre prémisse d'origine selon laquelle ces fonctionnalités utiles, telles que le formatage d'un SSN à la volée, sont triviales. Et c'est paresseux de simplement poster un message qui ne va pas, quand vous pouvez le réparer sans avoir à deviner le format.

        Cependant, je suis également d'accord avec Nicolas sur l'utilisation de la logique côté serveur en conjonction avec AJAX.

  4. 7

    Votre titre dit «Impressionnez vos amis…» mais vous ne parvenez pas à m'impressionner avec ces 2 min, téléphoné par courrier.

    Réécrivez votre titre (trop trompeur, cela fait penser qu'il y a des exemples et des pratiques discutés).

    Si les gens ne le font pas déjà dans leurs formulaires, ils apprennent simplement ou le formulaire n'est pas assez important pour utiliser la validation.

    Les vrais programmeurs Web le savent déjà et le font.

    • 8

      Geai,

      Désolé pour ça! Mon objectif n'était certainement pas de fournir des commentaires aux développeurs - je venais vraiment du point de vue d'un chef de produit. Je suis d'accord avec vous - mais c'est intéressant que certains autres développeurs ne le font pas! Je pense que c'est malheureux.

      Merci de prendre le temps!
      Doug

  5. 9

    Je suis totalement d'accord sur le fait que la validation est un élément nécessaire de toute application. En tant que chef d'équipe, je me retrouve généralement à renvoyer le code pour qu'il soit «fini» pour des raisons telles que des validations manquantes ou la limitation des longueurs de saisie de texte.

    Pour la plupart des choses sur lesquelles je travaille, je trouve qu'il faut environ 50% du temps pour que quelque chose fonctionne, dans des conditions normales et si les utilisateurs utilisent le système comme je l'avais prévu. L'autre 50% du temps de développement provient de la vérification de leurs entrées, de la garantie de l'intégrité des données et de la désactivation des champs de formulaire pour la saisie de données malveillantes.

    J'ai écrit un article sur la façon dont j'utilise InputVerifiers dans mes applications hava swing et montre comment je vérifie un champ de texte d'e-mail. L'expression régulière que j'utilise est facilement modifiable pour valider les numéros de téléphone, les codes postaux, les SSN, etc.

    Mon article de blog est à http://timarcher.com/?q=node/36

    Bonne rédaction Doug!

  6. 10

    Je suis d'accord. Les mots de passe sont vraiment importants et doivent être pris au sérieux. Je pense qu'il est normal que presque tous les formulaires tapent le mot de passe deux fois, mais ne pas montrer la validité des deux mots de passe montre que cela n'est pas pris au sérieux.

  7. 11

    Je suis d'accord que la validation client peut être une fonctionnalité très conviviale. Cependant, il est plus important de s'assurer que les validations elles-mêmes ont un sens.

    Vous avez fourni un exemple brillant de la façon dont la validation peut induire les utilisateurs en erreur et, pire encore, les éloigner de notre site:

    Validation de la force du mot de passe de Geek Wisdom de considère tZhKwnUmIss être un mot de passe faible. Non seulement il s'agit d'un mot de passe parfaitement fort, mais il aliénera également les utilisateurs car cela leur donne la fausse impression que la connexion à votre site à l'aide de ce mot de passe ne sera pas sécurisée.

    Il serait beaucoup mieux (et plus facile) d'indiquer simplement aux utilisateurs qu'un bon mot de passe comporte au moins six caractères et doit contenir à la fois des chiffres et des lettres.

    D'autres validations douteuses incluent les noms d'utilisateurs qui nécessitent une certaine longueur minimale ou peuvent ne pas contenir d'espaces. Quel est le problème avec les noms d'utilisateur X, john doe, ou même # *! §? Je peux gérer ça.

  8. 12

    Je suis d'accord avec toi. Certains formulaires ont l'air bien, mais ils n'offrent pas une bonne validation. Les informations personnelles sont données et il est juste de les prendre au sérieux, comme tout formulaire commercial sur papier.

  9. 13
  10. 14
  11. 15

    Je trouve un peu amusant que vous postez sur les avantages de fournir une validation de formulaire en temps réel et pourtant, votre formulaire de commentaire en bas de l'article ne fournit rien de tout cela ...

    Je me rends compte que vous utilisez WordPress pour bloguer vos pensées sur Internet, mais peut-être que vous assurer que vous pratiquez ce que vous prêchez n'est pas non plus une si mauvaise idée. 🙂

    Bon post, d'ailleurs, même si je ne suis pas forcément d'accord avec tout ce que vous avez écrit.

    • 16

      Doh! Vous m'avez cassé, Amanda! J'aurais aimé avoir le temps de mieux valider le formulaire et de l'intégrer dans WordPress. J'aime particulièrement le Adobe Spry cadre de validation et aimerait voir quelqu'un intégrer les deux!

      Merci! (Et j'apprécie toujours qu'il y ait plusieurs opinions sur n'importe quel sujet).
      Doug

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..