Formulier validatie m.b.v. JavaScript

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Martijn Wieringa

Martijn Wieringa

21/04/2009 14:10:00
Quote Anchor link
Ik ben bezig met het ontwikkelen van een 'universele' tool voor het valideren van formulier velden 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)
PHP script in nieuw venster Selecteer het PHP script
1
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);
...


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!
 
PHP hulp

PHP hulp

11/05/2021 15:14:56
 
Ed

Ed

21/04/2009 14:15:00
Quote Anchor link
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.
 
Martijn Wieringa

Martijn Wieringa

21/04/2009 14:18:00
Quote Anchor link
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.
Gewijzigd op 01/01/1970 01:00:00 door Martijn Wieringa
 
Hipska BE

Hipska BE

21/04/2009 14:28:00
Quote Anchor link
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.
 
Robert Deiman

Robert Deiman

21/04/2009 14:55:00
Quote Anchor link
@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/
 
Ed

Ed

21/04/2009 14:58:00
Quote Anchor link
@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.
 
Robert Deiman

Robert Deiman

21/04/2009 15:34:00
Quote Anchor link
@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.
 
Martijn Wieringa

Martijn Wieringa

21/04/2009 17:14:00
Quote Anchor link
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.
Gewijzigd op 01/01/1970 01:00:00 door Martijn Wieringa
 
Emmanuel Delay

Emmanuel Delay

21/04/2009 17:22:00
Quote Anchor link
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/
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay
 
Martijn Wieringa

Martijn Wieringa

21/04/2009 17:25:00
Quote Anchor link
@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 ;)
Gewijzigd op 01/01/1970 01:00:00 door Martijn Wieringa
 
Arian Stolwijk

Arian Stolwijk

21/04/2009 17:39:00
Quote Anchor link
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...
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.