Formulier validatie m.b.v. JavaScript

Lijkt me handiger om je formulier gewoon in je php op te bouwen. Validatie moet je alsnog in twee lagen toe passen. Client side validatie is er voor de gebruiker, om preventief al de fouten aan te kunnen geven. Daarna moet je alsnog server side validatie uitvoeren, omdat mensen nou eenmaal geen javascript hebben, of uit hebben staan (puur voor hacking purposes).

Lijkt me verstandiger om een OO oplossing te bedenken in PHP voor je forms en hier gelijk je validatie in te regelen, zodat je gelijk weet welke validatie je moet toepassen op welk element. Dan kan je bij je view laag een JS call meegeven naar je validatie per veld. En misschien zou je zelfs een asynchrone POST kunnen overwegen.

Afhankelijk van het formulier is het soms wenselijk dit wel of niet met PHP op te bouwen.. maar hoe het formulier wordt gegenereerd staat los van de werking van een dergelijke javascript validatie lijkt me?

-- edit --
Je zou met PHP wel dynamisch de regels 'addField(...)' kunnen opbouwen, maar mijn vraag gaan nu heel beslist niet over het PHP deel maar over het JS deel.

Ik vind het niet goed dat de validatie pas gebeurt bij het posten van de form, dan kun je net zo goed alles in php doen..

Het wordt in mijn ogen pas handig als je dat veld controleert als de persoon naar een volgend veld gaat.. (onBlur ofzo)

Dan pas ga je snelheid/winst boeken.

@Ed
Een form kan je best vanuit PHP maken, maar een algemene JS voor controle staat daar op zich los van. Cliënt side validatie is er inderdaad voor de gebruiker, de server side validatie is er zowel voor de beheerder als de gebruiker. (bijv. als de gebruiker geen JS ondersteunt, wil hij/ zij nog steeds feedback krijgen wanneer er iets fout in wordt gevuld.

Waar Ed op zich wel gelijk in heeft is dat het best asynchrone gepost kan worden, waarna je PHP controle een reactie terug geeft. Nadeel hiervan is dan weer dat tijdens het typen constant wordt gecontroleerd of er fouten zijn. Hiervoor wordt dan wel gebruik gemaakt van de internet verbinding. Is die even een momentje traag, dan lijkt het alsof de user alles compleet en goed heeft ingevuld. Het verbindingsprobleem heb je met puur JS niet.

@Pholeron

Wat wel leuk zou zijn is een soort van "admin panel" waarin je nieuwe controles aan kan maken. Bijv.: 0000 AA is een postcode, dus 4 getallen, een spatie en dan 2 letters. Dit zou je script in principe moeten kunnen analyseren en daar een regex voor maken? Dat zou het voor mensen zonder kennis van de taal gemakkelijk maken om het te verwerken. Ik snap ook dat dat bijna niet te doen is, maar dat zou mooie functionaliteit zijn.
Er zal ook een grote voorraad aan standaard mogelijkheden in moeten zitten.

Een veld kan:
required zijn, een minimum lengte, maximum lengte, vaste lengte (hoewel dit ook kan door min en max op hetzelfde aantal te zetten) een bepaalde opbouw moeten hebben, er moeten meldingen worden gemaakt bij de verschillende typen controles enzovoort. Er komt heel wat bij kijken. Een leuk voorbeeld is misschien dit wel:

http://jquery.bassistance.de/validate/demo/

@Hipska, dat is een valide argument. Maar dat doet niet veel af aan de vraagstellingen van de starter. Sommige velden kan je pas controleren als je gat posten, denk aan selectboxes of radio buttons. Of velden die verplicht moeten worden in gevuld. Velden die jij van waardes voorziet kunnen natuurlijk asynchroon gecheckt worden, kwestie van het correcte attribuut toevoegen.

@Ed

Ook die velden zijn prima on the fly met JavaScript te controleren. Stel ik tab door een formulier heen, de onblur() functie is dan prima geschikt voor het controleren van de velden op geldige content (oftewel: leeg is bij verplichte velden ongeldig)

Zie ook het linkje onderaan mijn vorige post.

Ik denk dat het een goede toevoeging is om velden te controleren wanneer deze worden ingevuld. Je kunt echter pas een zinnige foutmelding geven als de gebruiker aangeeft dat het klaar is met het invullen van het veld.. anders krijg je bijvoorbeeld bij elke toetsaanslag de melding dat het veld nog niet goed is ingevuld (als je bijv. een minimaal aantal karakters moet opgeven).

Een 'ajax-iets' inbouwen om velden te testen is ook een goede optie, maar ik zou daar dan eerder een 'eigen functie' voor laten schrijven, dan dit als een standaard feature op te nemen. Ik neem aan dat voor 99% de velden een dergelijke check namelijk niet zinnig is.

@Robert: Bedankt voor de link, eens ff neuzen

-- edit --
Wat betreft de link: Leuke uitgebreide tool, maar het ziet er wel lastig uit om fatsoenlijk te configureren.. ns kijken of daar iets aan veranderd kan worden.

Je kan een hoop dingen doen als je wil.

Begin bv. met de submit knop te disablen. Enable die pas wanneer alles is ingevuld wat moet ingevuld zijn.

Bij onMouseover van de submit knop (of beter nog, onMouseover van een div waar de bubmit in zit) kan je een laatste controle uitvoeren die al dan niet de knop aan zet.

Probeer echter een andere manier te vinden dan 10 popups die je niet zomaar kan afzetten. Als je volk echt wil wegjagen...

Je kan zoveel andere dingen doen. Zet bij elk fout ingevuld veld een flikkerend uitroepteken, maak de achtergrond fel rood, ... wat dan ook.

Om eerlijk te zijn: wat ik de laatste tijd bijna altijd doe:
Ik controleer met Ajax.
Bij het drukken op de button stuur je de gegevens op
=> twee mogelijkheden:
- ofwel is er iets fout, dan stuur je een JSON string op. In die string zet je een array met een 1 bij elk juist veld en een 0 bij elk fout veld.
Is echter alles juist, dan voer je de INSERT (of wat dan ook) uit. Dan ken je met javascript naar een andere pagina (met resultaten) springen.

Voordeel:
- je moet je controle maar 1 keer programmeren. Alles wat je in javascript controleert, zal je ook in php moeten double checken.
- Al je ingevulde velden blijven mooi ingevuld.

Als het je interesseert, in mijn Ajax tutorial komt dat allemaal aan bod.
http://phphulp.nl/php/tutorials/8/666/

@Emmanuel
Tnx voor de tip, klinkt goed! Ik zal je tutorial eens ff lezen!

-- edit --
Voor de meeste checks in je formulier heb je (lijkt mij) geen AJAX nodig, maar ik zie wel in hoe je dit op zo'n manier kunt toepassen. Maar mijn voorkeur zou er dan toch naar uit gaan voor zo'n specifiek geval een site-specifieke functie te schrijven.. die mogelijk wel gebruik kan maken van bestaande functionaliteit.

Ik heb zelf eerder al wel e.e.a. met AJAX ontwikkeld, dus ik snap de (on)mogelijkheden ;)

Ik heb ook een keer zo'n js validator gebouwd.

De source is hier te vinden: http://code.google.com/p/fh3jsvalidator/

Misschien heb je er wat aan, er zitten ook een hele hoop validators bij, zoals email enzo...