Restriction de saisie avec JQuery

S'il y a une chose qui me rend fou en ligne, c'est quand les formulaires de saisie me permettent d'entrer des données incorrectes, seulement pour signaler l'erreur après l'avoir essayée et soumise. Il me semble que la moitié des formulaires que je soumets doivent être remplis et soumis à nouveau car je n'ai pas inclus de lettre majuscule dans mon mot de passe, ou le mot de passe ne peut être que numérique ou autre.

La façon dont le cerveau fonctionne, nous recherchons des solutions basées sur les outils en face de nous. Vous n'entrez pas de lettres majuscules au distributeur, n'est-ce pas? Non, car le clavier ATM a uniquement des numéros. Vous pouvez frapper le mauvais numéro par erreur, mais vous n'avez jamais essayé d'entrer votre adresse e-mail ou le nom de jeune fille de votre mère.

C'est là que réside le problème, le clavier que vous utilisez complique la saisie de données en ligne. Il a probablement entre 75 et 100 touches et encore plus de caractères sont facilement accessibles en tenant des combinaisons de touches multiples. L'utiliser pour se connecter à Facebook, c'est un peu comme sortir du lait dans une Ferrari.

Bien sûr, votre clavier doit avoir plus d'options d'entrée que n'importe quel champ de formulaire particulier, car il s'agit d'un outil multi-usage. vous ne pouvez pratiquement pas avoir un clavier différent pour chaque type d'entrée possible.

Cela conduit à un sérieux problème d'utilisabilité: les utilisateurs sont constamment invités à «corriger» leurs informations en fonction d'un formulaire. C'est un excellent moyen d'accroître la frustration et de perdre des clients.

Les appareils à écran tactile ont fait de grands progrès dans ce domaine en modifiant le clavier à l'écran pour adapter les types de saisie possibles aux données requises; entrez une adresse e-mail sur un iPhone par exemple, et vous ne pourrez pas entrer d'espace par erreur, car la barre d'espace n'est pas fournie.

Image clavier numérique via shutterstock

Jusqu'à ce que nous travaillions tous sur les écrans tactiles, nous avons besoin d'une solution temporaire, et en fait, il est assez simple: en utilisant jQuery, nous pouvons glisser une couche d'intelligence entre le clavier et le champ de saisie et accepter les données uniquement , ignorant tout ce qui est en dehors de ces limites, confiant qu’il s’agit d’une erreur.

Tout d'abord, nous devons définir un champ de saisie en HTML que nous voulons restreindre, un numéro de téléphone par exemple:

Phone:

Ensuite, dans la tête du document, il faut importer jQuery:

Et immédiatement après, ajoutez le script suivant:

Ce script s'exécute une fois que le document est prêt, associant une méthode de frappe à la zone de saisie .phoneInput . Nous détectons ensuite quelle touche a été pressée en fonction de sa propriété charCode - le numéro 0 se voit attribuer le code 48, 1 est 49 et ainsi de suite - toute clé située en dehors de notre plage doit retourner false. Si la méthode retourne false, le navigateur ignore simplement la frappe.

Cela signifie que si l'utilisateur frappe une touche différente de 0 à 9, l'entrée sera ignorée, ce qui limitera effectivement l'entrée aux nombres.

Nous pouvons appliquer la même technique à presque tous les champs, en construisant des règles complexes en utilisant AND logique et logique OU. Par exemple, si nous voulions restreindre la saisie d'un nom de famille, nous devrions limiter la saisie aux lettres minuscules (97-122), majuscules (65 - 90) et au tiret occasionnel (45):

$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});

Vous pouvez essayer une démo ici .

Ce code est une amélioration progressive. Cela soulagera la validation de votre serveur, mais cela ne signifie pas que vous ne devez pas valider également les informations que vous collectez.

La prévention, comme on dit, vaut mieux que guérir; et en utilisant cette astuce, vous constaterez une réduction du nombre de personnes qui démarrent, mais ne complétez pas vos formulaires, en particulier lorsque des exigences de données complexes sont impliquées.

Les utilisateurs font-ils régulièrement des erreurs sur vos formulaires? Comment gérez-vous les erreurs? Faites le nous savoir dans les commentaires.

Image / vignette en vedette: image du clavier via shutterstock