Formulier validatie m.b.v. JavaScript
Deze validatie is natuurlijk geen vervanging van de PHP validatie, maar een extra hulpmiddel omdat javascript veel sneller algemene fouten in een formulier kan detecteren, dan dat dit via een (relatief) langzame POST-request moet gebeuren.
Nu was mijn vraag wat voor functionaliteit jullie zouden wensen in een dergelijke tool?
Wat ik zoal zelf kan bedenken:
- Controle op syntax, zoals: hexcolor, date, email, float, integer, ip, file (specifieke extenties?), timestamp, url, ...?
- Eenvoudig kunnen toevoegen van eigen validatie-functies.
- Controle op lengte van de waarde (min/max aantal karakters)
- Controle op groote van de waarde (waarde moet binnen een bepaald bereik zitten, met name handig voor numerieke waarden).
- Veld wel/niet verplicht invullen
- ...?
Dit is een stukje script wat ik al had bedacht als test, zodat je een beetje weet waar ik graag heen wil met deze tool:
http://www.php-solutions.nl/projects/form-validator/index.php
In de broncode vind je o.a. dit fragment terug
Code (php)
1
2
3
4
5
2
3
4
5
var FV1 = new FormValidator(); // Nieuw formulier ter controle
FV1.setErrorMessage('Controleer het formulier a.u.b.'); // Standaard error bericht
FV1.addField('textfield_1', 'text', 10, 20, tr_style);
...
FV1.setErrorMessage('Controleer het formulier a.u.b.'); // Standaard error bericht
FV1.addField('textfield_1', 'text', 10, 20, tr_style);
...
De addField() functie bevat de volgende parameters:
- ID van het formulier veld
- Eigen validatie functie of een standaard validatie type (ik heb er enkele al gemaakt als test)
- Min. waarde/lengte (zou optioneel moeten worden??)
- Max waarde/lengte (zou optioneel moeten worden??)
- Optionele callback functie; in het voorbeeld is deze callback functie gebruikt om de achtergrond van de TD's rood te kleuren.
Graag jullie feedback/suggesties!
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.
-- 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.
Gewijzigd op 01/01/1970 01:00:00 door Martijn Wieringa
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.
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/
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.
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.
Gewijzigd op 01/01/1970 01:00:00 door Martijn Wieringa
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/
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay
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 ;)
Gewijzigd op 01/01/1970 01:00:00 door Martijn Wieringa
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...