Input beperken met JQuery

Als er een ding is dat me gek maakt op internet, dan is het wanneer invoerformulieren me in staat stellen om onjuiste gegevens in te voeren, alleen om op de fout te wijzen nadat ik het probeer in te dienen. Het lijkt erop dat de helft van de formulieren die ik inlever, opnieuw moet worden bijgevuld en opnieuw moet worden ingediend omdat ik geen hoofdletter in mijn wachtwoord heb opgenomen, of het wachtwoord kan alleen numeriek zijn of een andere eis die niemand denkt te vermelden.

De manier waarop de hersenen werken, we zoeken naar oplossingen op basis van de tools die voor ons liggen. Je voert geen hoofdletters in bij de geldautomaat, of wel? Nee, omdat het ATM-toetsenbord alleen cijfers bevat. U kunt per ongeluk het verkeerde nummer raken, maar u hebt nog nooit geprobeerd uw e-mailadres of de meisjesnaam van uw moeder in te voeren.

Daarin schuilt het probleem, het toetsenbord dat je gebruikt maakt het ingewikkeld om online gegevens in te voeren. Het heeft waarschijnlijk tussen de 75 en 100 toetsen en nog meer tekens zijn gemakkelijk toegankelijk door combinaties met meerdere toetsen vast te houden. Het gebruiken om in te loggen op Facebook lijkt veel op het eruit springen voor melk in een Ferrari.

Natuurlijk moet uw toetsenbord meer invoeropties hebben dan welk specifiek formulierveld dan ook, omdat het een tool voor meervoudig gebruik is; je kunt praktisch geen ander toetsenbord hebben voor elk mogelijk type invoer.

Dit leidt tot een ernstig probleem met de bruikbaarheid: gebruikers worden voortdurend gevraagd hun informatie te 'corrigeren' om aan een formulier te voldoen. Dat is een geweldige manier om frustratie te vergroten en zaken te verliezen.

Touchscreen-apparaten hebben grote vooruitgang geboekt in dit gebied door het toetsenbord op het scherm aan te passen om de soorten invoer aan te passen aan de vereiste gegevens; voer bijvoorbeeld een e-mailadres op een iPhone in en u kunt per ongeluk een spatie invoeren, omdat de spatiebalk niet is opgegeven.

Digitaal toetsenbordbeeld via Shutterstock

Totdat we allemaal aan touchscreens werken, hebben we een tijdelijke oplossing nodig, en er is eigenlijk een vrij eenvoudige: met jQuery kunnen we een laagje intelligentie tussen het toetsenbord en het invoerveld overbrengen en alleen de gegevens accepteren als deze binnen de verwachte grenzen valt , alles buiten die grenzen negerend, ervan overtuigd dat het een fout is.

Eerst moeten we een invoerveld in HTML instellen dat we willen beperken, een telefoonnummer bijvoorbeeld:

Phone:

Vervolgens moeten we in het hoofd van het document jQuery importeren:

En voeg onmiddellijk daarna het volgende script toe:

Dit script wordt uitgevoerd zodra het document gereed is, waarbij een toetsaanslagmethode wordt gekoppeld aan het invoerveld .phoneInput . We detecteren vervolgens welke toets is ingedrukt op basis van zijn charCode- eigenschap - het nummer 0 krijgt de code 48, 1 is 49 enzovoort - elke sleutel die buiten ons bereik valt, moet false opleveren. Als de methode false retourneert, negeert de browser de toetsaanslag.

Dit betekent dat als de gebruiker een toets raakt die niet 0-9 is, de invoer wordt genegeerd, waardoor de invoer effectief wordt beperkt tot getallen.

We kunnen dezelfde techniek toepassen op vrijwel elk veld, waarbij we complexe regels bouwen met logische AND en logische OR. Als we bijvoorbeeld de invoer van een achternaam willen beperken, moeten we de invoer beperken tot kleine letters (97-122), hoofdletters (65 - 90) en het incidentele koppelteken (45):

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

Jij kan probeer hier een demo .

Deze code is een progressieve verbetering. Het vergt enige druk van uw servervalidatie, maar dat betekent niet dat u niet ook de informatie die u verzamelt moet valideren.

Preventie, zoals het gezegde luidt, is beter dan genezen; en met deze tip ziet u een vermindering van het aantal mensen dat begint, maar uw formulieren niet voltooit, vooral als het gaat om complexe gegevensvereisten.

Maken gebruikers regelmatig fouten in uw formulieren? Hoe ga je om met de fouten? Laat het ons weten in de comments.

Uitgelichte afbeelding / thumbnail: toetsenbord afbeelding via Shutterstock