Inline validatie met een Ajax sausje nl

Door crisp op woensdag 4 november 2009 14:04 - Reacties (15)
Categorie: Tweakers.net, Views: 6.217

Onlangs las ik een interessant artikel op A List Apart over de gebruiks(on)vriendelijkheid van formulieren op webpagina's, en hoe de gebruikerservaring verbeterd kan worden door inline validatie toe te passen. Zelf liep ik al langer met een dergelijk idee rond en ik had daarbij al een specifiek formulier op Tweakers.net op het oog; namelijk ons registratieformulier. Naar aanleiding van het artikel op ALA heb ik besloten om dit eindelijk eens te realiseren :)

De kans bestaat dat je al geregistreerd bent op Tweakers.net en allang vergeten bent hoe je het aanmelden op Tweakers.net 'ervaren' hebt, maar ook voor degenen die nog niet geregistreerd hebben is hier een screenshot van de terugkoppeling van eventuele fouten of problemen bij de verwerking van de aanmeldgegevens:

Foutafhandeling oude Tweakers.net registratieformulier
Foutafhandeling oude Tweakers.net registratieformulier

Dat verdient natuurlijk geen schoonheidsprijs :P Niet alleen de manier waarop de meldingen getoond worden is behoorlijk gebruiksonvriendelijk, maar ook het feit dat achteraf - na het versturen van de gegevens - pas melding wordt gemaakt van eventuele problemen, en deze vervolgens ook nog eens in één blok getoond worden.

Zeker het kiezen van een gebruikersnaam kan nog wel eens lastig zijn; met meer dan 250.000 geregistreerde gebruikers is de kans groot dat de naam die je voor ogen had al bezet is. De kans is zelfs aanwezig dat een ter plekke verzonnen alternatief ook bezet is. Hieruit volgt dan al gauw een heel typ- en klikfestijn totdat het 'stomme formulier' eindelijk verwerkt kan worden.

Dat kan dus beter, en wel zo:

Foutafhandeling nieuwe Tweakers.net registratieformulier
Foutafhandeling nieuwe Tweakers.net registratieformulier

Wat we nu doen is tijdens het intypen van de verschillende verplichte velden al op de achtergrond validatie toepassen en het resultaat daarvan naast het invoerveld laten zien. Op het moment dat er in plaats van een rood uitroepteken met foutmelding een groen vinkje verschijnt is voor de gebruiker meteen duidelijk dat de invoer in orde is en hij of zij rustig verder kan gaan met het invoeren van het volgende veld zonder bang te hoeven zijn achteraf invoer te moeten verbeteren of aanpassen.

Het meerendeel van de validatie kan volledig binnen de browser worden afgehandeld, maar voor die gevallen dat een check op de server noodzakelijk is (bijvoorbeeld om te kijken of een gebruikersnaam al bestaat) wordt er gebruik gemaakt van Ajax. Tijdens deze checks is tijdelijk een throbber te zien naast het invoerveld zodat de gebruiker op dat moment ziet dat er een check plaatsvind. Dit zijn kleine requests die in zeer korte tijd een resultaat terug kunnen geven.

We hopen dat deze methode onze website weer een stukje vriendelijker en toegankelijker heeft gemaakt en veel navolging krijgt :)

Volgende: IPv6 validation - more caveats 11-'09 IPv6 validation - more caveats
Volgende:  Having fun with IE - part 4: invalid argument 08-'09 Having fun with IE - part 4: invalid argument

Reacties


Door Tweakers user veldmuis, woensdag 4 november 2009 14:12

Wordt al volop toegepast overal natuurlijk, dus het werd tijd dat dat hier ook kwam :+.

Netjes, en zeker nuttig. De grootste ergernis bij het registreren van een account waar dan ook is wel dat je 8x je wachtwoord in moet typen, omdat je gebruikersnaam al bestaat, en het wachtwoordveld na die melding weer leeg is.

Door Tweakers user Yoozer, woensdag 4 november 2009 14:13

Ja, dit is inderdaad erg handig en niet eens gruwelijk lastig om te doen met een beetje Mootools :). Twitter past dit ook toe.

Door Tweakers user rb338, woensdag 4 november 2009 14:14

Prettig inderdaad, dit gebeurt op veel websites tegenwoordig.

Wat je vast al doet maar wat niet uit je screenshot blijkt: als er iets fout is (bestaande user bijvoorbeeld) de 'Registreren' knop uitschakelen. Anders spring je mogelijk alsnog naar een andere pagina, met een foutmelding, waarna je terug moet en de helft weer opnieuw kan invullen :+

[Reactie gewijzigd op woensdag 4 november 2009 14:15]


Door Tweakers user MueR, woensdag 4 november 2009 14:14

Een goede verbetering. Ik wilde wel eens even zien wat je er van gebakken hebt. Een ding wat me wel opvalt is dat je bij errors wel gewoon submits toestaat. Ik zou er voor kiezen om dat al voor de submit af te handelen dmv een errormelding en een return false. Waarom heb je voor deze manier gekozen?

Door Tweakers user PeterSelie, woensdag 4 november 2009 14:15

Misschien een stukje mierenneukerij, maar de validatie werkt schijnbaar via onkeyup. Er worden bij het loskomen van de keys shift, control, alt, capslock, arrows etc ook vrolijk requests verstuurd.

Misschien ter overvloede: maar zou je die keys niet afvangen? Niet bepaald een performance issue, maar wel netjes :)

Door Tweakers user Luuk1983, woensdag 4 november 2009 14:21

Inline validatie is hardstikke goed naar mijn mening. Alleen vind ik het in de vorm zoals hierboven lang niet altijd handig. Als je de hele foutmelding weer wil geven, dus in dit geval de hele tekst 'Gebruikersnaam is al in gebruik', dan vind ik dat het teveel ruimte inneemt. Het is sowieso al lastig om formulieren netjes op te maken en uit te lijnen, maar een hele zin witruimte achter een textbox vind ik absoluut niet netjes.
Ik heb zelf niet de perfecte oplossing, maar het gebruik van de Ajax Toolkit in .NET heeft een aardige in gebruik, waarbij een textballonnetje gebruikt wordt:

http://www.codeproject.co...catedValidatorCallout.png

Maar desalniettemin, het is een mooie verbetering!

[Reactie gewijzigd op woensdag 4 november 2009 14:23]


Door Tweakers user BlackWhizz, woensdag 4 november 2009 14:22

Het is beter om onBlur te gebruiken in deze situaties.

Door Tweakers user crisp, woensdag 4 november 2009 14:53

Een goede verbetering. Ik wilde wel eens even zien wat je er van gebakken hebt. Een ding wat me wel opvalt is dat je bij errors wel gewoon submits toestaat. Ik zou er voor kiezen om dat al voor de submit af te handelen dmv een errormelding en een return false. Waarom heb je voor deze manier gekozen?
Omdat het niet uitmaakt :P Bij een submit met fouten wordt gewoon het (ingevulde) formulier met foutmeldingen weer getoond. Het geeft echter wel de mogelijkheid om boven het formulier de foutmeldingen nader te specificeren en/of tips te geven.
Misschien een stukje mierenneukerij, maar de validatie werkt schijnbaar via onkeyup. Er worden bij het loskomen van de keys shift, control, alt, capslock, arrows etc ook vrolijk requests verstuurd.
Performance-technisch is dat geen bezwaar (er wordt in die gevallen geen echte request meer gedaan omdat de respons van het vorige request nog beschikbaar is in de clientcache), maar nodig is het inderdaad niet. Ik heb de code nu zo aangepast dat hij pas een request doet als er ook daadwerkelijk iets gewijzigd is :)
Het is beter om onBlur te gebruiken in deze situaties.
Nee, je wilt het juist checken terwijl de gebruiker nog in het betreffende veld zit zodat hij of zij het ook meteen kan verbeteren in plaats van weer terug te moeten gaan naar het veld.

Door Tweakers user Mike-RaWare, woensdag 4 november 2009 15:10

Het valt mij op dat streepjes ongeldige tekens zijn geworden. Waarom is dat zo?

Door Tweakers user Femme, woensdag 4 november 2009 15:32

Inline validatie is hardstikke goed naar mijn mening. Alleen vind ik het in de vorm zoals hierboven lang niet altijd handig. Als je de hele foutmelding weer wil geven, dus in dit geval de hele tekst 'Gebruikersnaam is al in gebruik', dan vind ik dat het teveel ruimte inneemt. Het is sowieso al lastig om formulieren netjes op te maken en uit te lijnen, maar een hele zin witruimte achter een textbox vind ik absoluut niet netjes.
Die witruimte was er toch al, dus dat maakt in dit geval niet uit. Tekstballonnetjes hebben als nadeel dat ze content kunnen verbergen die de user op dat moment juist wil zien. Ik ben voorstander van het inline tonen van deze meldingen.

Wat eventueel zou kunnen is de melding in een regel onder het inputveld weergeven, maar dat is in dit geval niet nodig omdat er ruimte rechts van het inputveld is.

Door Tweakers user crisp, woensdag 4 november 2009 16:30

Het valt mij op dat streepjes ongeldige tekens zijn geworden. Waarom is dat zo?
Dat was een bugje welke bij deze weer is rechtgezet :)

Door Tweakers user kwaakvaak_v2, woensdag 4 november 2009 16:48

en wat nu als je geen javascript hebt? Ik geef toe, het is een longshot maar er zijn echt serieus mensen die browsers gebruiken zonder javascript (bepaalde screenreaders voor slechtzienden bijv.)

Door Tweakers user ari, woensdag 4 november 2009 17:26

Als javascript is uitgeschakeld dan kan de gebruiker het formulier submitten, om vervolgens het formulier voorzien van foutmeldingen weer voor z'n neus te krijgen. Javascript maakt het alleen wel een stukje mooier en vriendelijker in gebruik, maar is niet noodzakelijk.

Door Tweakers user Alex), maandag 9 november 2009 12:00

Ik vind de melding "E-maildomein is niet toegestaan" niet echt duidelijk... misschien kan er een linkje bij wat aangeeft waarom niet? Misschien linkje richting FAW ofzo?

Edit: en in het bovenste screenshot staat er in de alert een typfout: "door jouw gebruikte" moet "door jou gebruikte" zijn ;-)

[Reactie gewijzigd op maandag 9 november 2009 12:01]


Door Tweakers user crisp, maandag 9 november 2009 13:33

Ik vind de melding "E-maildomein is niet toegestaan" niet echt duidelijk... misschien kan er een linkje bij wat aangeeft waarom niet? Misschien linkje richting FAW ofzo?
Dat zijn inderdaad dingen die je zelfs met een iets langere zin niet zo makkelijk uit kan leggen. Een pointer naar een FAQ is dan misschien wel de beste optie.
Edit: en in het bovenste screenshot staat er in de alert een typfout: "door jouw gebruikte" moet "door jou gebruikte" zijn ;-)
Thanks, die heb ik meteen even gefixed :)

Reageren is niet meer mogelijk