Hvis der er en ting, der driver mig sindssyge online, er det, når inputformularer giver mig mulighed for at indtaste forkerte data, kun for at påpege fejlen, efter at jeg har forsøgt at indsende det. Det ser ud til, at halvdelen af ​​de formularer, jeg sender ind, skal genopfyldes og indsendes igen, fordi jeg ikke har inkluderet et stort bogstav i mit kodeord, eller det gjorde jeg, eller adgangskoden kan kun være numerisk eller et andet krav, som ingen troede at nævne.

Hvordan hjernen virker, vi leder efter løsninger baseret på værktøjerne foran os. Du indtaster ikke store bogstaver på ATM'en? Nej, fordi ATM-tastaturet kun har tal. Du kan fejlagtigt slå det forkerte nummer, men du har aldrig forsøgt at indtaste din e-mail-adresse eller din mors pigenavn.

Her ligger problemet, det tastatur, du bruger, komplicerer indlæsning af data online. Det har sandsynligvis mellem 75 og 100 nøgler, og endnu flere tegn er let tilgængelige ved at holde multi-nøgle kombinationer. Brug det til at logge ind på Facebook er lidt som at dukker op for mælk i en Ferrari.

Selvfølgelig skal dit tastatur have flere indgangsindstillinger, end et bestemt formularfelt kræver, fordi det er et multifunktionsværktøj; Du kan ikke praktisk talt have et andet tastatur til enhver mulig type input.

Dette fører til et alvorligt brugbarhedsproblem: Brugere bliver hele tiden bedt om at "rette" deres information til en formular. Det er en fantastisk måde at øge frustration og miste forretninger på.

Touchscreen-enheder har gjort store fremskridt i dette område ved at ændre tastaturet på skærmen for at skræddersy de mulige indtastninger til de ønskede data. Indtast f.eks. en e-mail-adresse på en iPhone, og du vil muligvis ikke indtaste et mellemrum, fordi mellemrumstasten ikke er angivet.

Digital Keyboard

Digitalt tastaturbillede via Shutterstock

Indtil vi alle arbejder på berøringsskærme, har vi brug for en midlertidig løsning, og det er faktisk ret simpelt: Ved hjælp af jQuery kan vi glide et lag af intelligens mellem tastaturet og indtastningsfeltet og acceptere kun dataene, hvis det falder indenfor de forventede grænser , ignorerer noget uden for disse grænser, overbevist om, at det er en fejl.

For det første skal vi oprette et inputfelt i HTML, som vi vil begrænse, f.eks. Et telefonnummer:

Derefter skal vi i dokumentets hoved importere jQuery:

Og umiddelbart efterfølgende tilføj følgende script:

Dette script kører, når dokumentet er klar, ved at vedhæfte en tastetryk- metode til inputfeltet. Vi registrerer derefter, hvilken tast der er trykket på basis af charCode- egenskaben - nummeret 0 er tildelt koden 48, 1 er 49 osv. - En hvilken som helst nøgle uden for vores sortiment skal returnere falsk. Hvis metoden returnerer falsk, vil browseren simpelthen ignorere tastetrykket.

Dette betyder, at hvis brugeren rammer en nøgle, der ikke er 0-9, ignoreres inputen, hvilket effektivt begrænser indtastningen til tal.

Vi kan anvende den samme teknik på næsten ethvert felt, opbygge komplekse regler ved hjælp af logisk AND og logisk OR. Hvis vi f.eks. Ville begrænse indtastningen til et efternavn, skulle vi begrænse indtastningen til små bogstaver (97-122), store bogstaver (65 - 90) og lejlighedsvis bindestreg (45):

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

Du kan prøv en demo her .

Denne kode er en progressiv forbedring. Det vil tage nogle af belastningen af ​​din server validering, men det betyder ikke, at du ikke også bør validere oplysninger, du samler.

Forebyggelse, som det siger siger, er bedre end helbredelse; og ved hjælp af dette tip ses en reduktion i antallet af personer, der starter, men ikke udfyld dine formularer, især når komplekse datakrav er involveret.

Gør brugerne regelmæssigt fejl på dine formularer? Hvordan håndterer du fejlene? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede: tastaturbillede via Shutterstock