Ongeduldige website bezoekers en formulieren

Ik ben al een tijdje op mijn gemak bezig met het moderniseren van de webformulieren voor de websites van mijn werk, en heb gekozen voor een separate client-side validatie techniek, aangevuld met separate server-side validatie nadien. Dit om ervoor te zorgen dat ik zo min mogelijk a-synchrone call-back scenario's hoef af te dekken. Niet dat ik AJAX schuw, maar gewoon omdat het voor nu gewoon sneller opgeleverd kan worden en het ook even niet complexer hoeft te worden dan nodig is. Dit laatste vooral vanwege het gebruik van 3rd party oplossingen waar een content-editor gewoon in moet kunnen blijven werken en mij niet bij elke inhoudelijke aanpassing nodig moet hebben. Ockhams scheermes als het even kan!

Setup voor client-side validatie library

Ik heb gekozen voor het gebruik van parsley.js, daar het precies de mogelijkheden biedt die ik zocht.

Ik heb dit verrijkt met de Bootstrap opmaak van de eigen site en alles draaide prima. Totdat ik merkte dat al vrij snel meerdere formulier registraties direct achter elkaar binnen begonnen te komen. En zo heel af en toe kreeg ik er 20+ binnen, met een uitschieter naar ~100...

Spam?

Oeps! Na alles na gelopen te hebben, kwam ik erachter dat er op zich niets mis was met mijn implementatie. De client-side verliep prima. Parsley JS deed zijn ding en er waren niet echt scenario's te bedenken waar mijn initialisatie en validatie regels voor Parsley fout zouden verlopen (gesloten proces waar de gebruiker doorheen loopt), en ook met testen kwam ik niets tegen waar dit mis zou gaan.

Niets te vinden?

Toch maar eens geprobeerd mijzelf nog eens goed in de gebruikers te verplaatsen. 100 formulier inzendingen in 5 minuten... Trage verbinding? Wellicht. Zitten er verschillen in de ingevoerde data door de gebruiker? Niet echt, een beoordelingscijfertje aangepast, verder niet. Dus in ieder geval is de gebruiker 'terug gegaan' na inzending. Kan gebeuren. Maar zoveel dubbelen is niet juist. Hoe zou een gebruiker op zo'n formulier klikken?

En toen had ik het ineens. Klikken... 2 keer op verzenden klikken voordat het formulier doorgaat naar de eindpagina? De befaamde dubbelklik? Yep...

Dus ook als een verbinding trager lijkt te zijn? 5 keer? Yep... Bijzonder dat de persoon met 100 inzendingen dan ook echt heeft zitten klikken als een malle, maar goed, begrijpelijk.

Oplossen die hap

Okay! Ik heb iets waar ik mee kan werken. Om bovenstaand te voorkomen heb ik een simpele gif in een div met hoge z-index ingezet die bij de verwerking van de Parsley code wordt getoond, en natuurlijk verdwijnt zodra de eindpagina wordt getoond.

    $("form").on("submit", function () {
        //Laat het loading scherm zien 
        $("#loading").css("display", "block");
        //Voer de rest van de validatie code uit...

Daarnaast moet je dan ook nog het laadscherm weghalen wanneer er toch iets niet goed blijkt te zijn, ofwel wanneer Parsley terugkomt met validatie-fouten:

    // Wanneer er een fout in het document wordt gevonden bij inzenden, dient het loading scherm weer weggehaald te worden
      window.Parsley.on('field:error', function() { 
        $("#loading").css("display", "none");
      });

En daarmee is de cirkel rond. Server-side validatie loopt hier eigenlijk altijd wel door, zolang er niemand met de client-side resultaten gaat lopen rommelen (maar goed, dan nog komt die netjes terug als dit wel zo zou zijn), reCAPTCHA van Google houdt de bots goed buiten de deur, en dubbelklikkers en trage verbindingen zijn nu geen obstakel meer.