real time validatie van HTML formulieren

17 March, 2008

in Gebruiksvriendelijkheid

Een van de manieren om input te vragen van bezoekers is het gebruik van een formulier met invulvelden. Meestal zul je moeten controleren of de bezoeker ook invult wat jij vraagt.

Zo wil je bijvoorbeeld controleren of de checkbox algemene voorwaarden is aangevinkt en of het e-mailadres ook het formaat heeft van een e-mailadres.

Meestal gebeurt dit achteraf en krijg je als bezoeker een foutmelding als iets niet klopt. Het is echter ook mogelijk de validatie van de gegevens real-time uit te voeren. De bezoeker krijgt dan feedback op het moment dat de bezoeker het formulier invult.

Hoe ziet real time validatie eruit?

Een van de eerste sites waarop ik dit zag is www.gangsterz.nl

De link verwijst naar hun registratie pagina die er verder normaal uitziet. Als je de velden vult en naar het volgende veld gaat dan wordt het invulveld meteen gevalideerd. Als er iets niet is goed gegaan dan zie je een rood kruisje, anders een groen vinkje.

voorbeeld van live validatie

Zoals je ziet krijg ik een rood kruisje bij het e-mailadres dat geen extensie heeft. Het wachtwoord geeft ook een foutmelding omdat ik dit aangeklikt heb en vervolgens niets heb ingevuld.

Een ander voorbeeld van live validatie is te vinden op Twitter. Als je je gebruikersnaam intypt dan wordt meteen geverifieerd of deze al bestaat.

live validatie bij twitter

Aangezien ik al een Twitter account heb met de naam Oeroek geeft het systeem netjes aan dat de username al bezet is. Wat ik wel een gemiste kans vind bij Twitter is dat het wachtwoord niet live gevalideerd wordt. Je moet minimaal 6 karakters intoetsen. Ik probeerde het met 5 maar kreeg geen foutmelding.

Voorwaarden voor live validatie

Dit soort live validatie is een flinke vooruitgang bij het invullen van online formulieren. Uiteraard zijn er wel enkele punten om rekening mee te houden als je live validatie gaat gebruiken.

  • Zonder duidelijke vraag ben je nergens. Laat bekenden je formulier gebruiken en vraag of ze de bedoeling snappen.
  • Geef aan waarom iets fout is. Een wachtwoord kan om meerdere redenen niet valideren. Beide velden zijn misschien niet gelijk of het wachtwoord is te kort of te lang, etc. laat je bezoeker weten wat er fout is.
    Bovenstaand formulier geeft een tooltip als je je muis over het kruisje/vinkje beweegt. Maak hier bijvoorbeeld een linkje van naar een pagina waar de precieze eisen staan.
  • Live validatie is vaak cliënt side en daardoor minder veilig. Dit soort live validatie kan dus niet de validatie vervangen op de server.
  • Zorg dat het programma dat je hiervoor gebruikt niet te groot is. De prestatie van je website moet natuurlijk niet te laag worden.
  • Ben consequent, als je eenmaal begint met live validatie dan verwacht de bezoeker het bij de andere velden natuurlijk ook.
  • Laat niet alleen zien als er iets fout gaat maar ook als er iets goed gaat.

Voordelen van real time valideren

Er zijn natuurlijk vele voordelen bij dit soort validatie. Je vertelt de bezoeker meteen waarom een invulvak niet goed is ingevuld. De bezoeker hoeft dan later niet terug te redeneren maar kan meteen aanpassingen maken nu dat specifieke veld nog in zijn hoofd zit. Daarbij gebeurt het nogal eens dat een formulier achteraf een foutmelding geeft maar dat niet duidelijk is waar het probleem zit. Nu wordt per veld gecontroleerd en eventueel aangepast.

Wat mij ook nogal eens gebeurd (als ik met IE aan de slag ben) is dat ik een formulier invul waarna ik een foutmelding krijg. in veel gevallen is vervolgens het hele formulier leeg en moet ik weer vooraan beginnen. Dit soort klanten-weg-jaag-acties worden misschien minder als je real time validatie gebruikt. Overigens heb je het probleem dan nog steeds niet opgelost want eigenlijk zou een bezoeker na een foutmelding niet al zijn informatie kwijt hoeven te zijn.

Hoe zet ik live validatie op mijn website

Live validatie kan nogal technisch zijn. Als je echter bereid bent Javascript te gebruiken dan kun je op livevalidation een Javascript bestand van 12,5 kb downloaden. Je dient dit Javascript aan je website toe te voegen en per invulveld aan te geven wat er gecontroleerd moet worden. Vervolgens wordt de validatie voor je geregeld. je kan gebruik maken van het voorbeeld van de website of zelf je layout regelen.

Als je liever niet te veel met cliënt side validatie werkt kun je denken aan een AJAX implementatie. Dit is wel een flink stuk lastiger maar stelt je wel in staat om bijvoorbeeld via PHP of ASP je validatie te regelen. Op Particletree vind je een handleiding.

Waarom zit dit niet op elk formulier

Ik begin me nu wel af te vragen waarom ik dit zo weinig tegenkom. Als ik soms formulieren invul dan verdwijnt het bloed onder mijn nagels als ik weer eens vage foutmeldingen krijg of weer opnieuw alles moet invullen.

Wat denken jullie, wordt real-time validatie nog eens populair? Of zijn er soms nadelen die ik even over het hoofd zie?

Blijf op de hoogte

Vond je deze informatie interessant, zorg dan dat je het laatste nieuws en de beste kortingen via onze nieuwsbrief ontvangt. Schrijf je nu in >>>

Je kan je natuurlijk ook op onze RSS feed inschrijven en het nieuws volgen via je eigen RSS Reader.

{ 2 reacties }

antoine 06.12.08 om 12:46

Zou het kunnen zijn dat een formulier niet ingevuld kan worden als er bijv. een : e met een ‘ is ingevuld?
het kan zijn dat er dan soms problemen door komen. of een o met 2 puntjes erop.

Oeroek 06.12.08 om 13:15

Een formulier kan in beginsel alles accepteren. Aangezien dit betekent dat ook kwaadaardige code kan worden ingevuld beveiligen veel mensen hun formulieren door de invoer te beperken.

Als je dit niet goed doet dan kan dit ook betekenen dat bepaalde trema’s en puntjes boven letters er niet meer doorheen komen.

Een veel gebruikte methode is bijvoorbeeld dat je alleen de 26 letters uit het alfabet en cijfers toestaat. Alle speciale tekens sluit je dan uit.

Previous post:

Next post: