Wat is tegenwoordig nou de beste manier om form validatie uit te voeren?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jorn Reed

Jorn Reed

21/02/2022 21:53:25
Quote Anchor link
Hoi,

Ik heb altijd al PHP gebruikt om formulieren te valideren. Dit gaat me altijd wel goed af. Maar toch wil ik tegenwoordig wat meer met JS kunnen doen. Denk hierbij aan formulieren opgedeelt in stappen. Dan wil je niet pas bij `verzenden` alles valideren, maar een aantal verschillende velden per stap, zoals bijv of je je naam wel hebt ingevuld, een geslacht hebt gechecked in een radio button etc. Wat is nou de beste manier om dit zo in JS te kunnen doen, in een situatie van een stapsgewijs formulier?
 
PHP hulp

PHP hulp

26/06/2022 13:45:18
 
- Ariën  -
Beheerder

- Ariën -

21/02/2022 23:10:15
Quote Anchor link
Het beste advies is om het wiel niet opnieuw uit te vinden. Er zijn genoeg libraries te vinden:

https://validatejs.org/
https://www.cssscript.com/custom-html5-form-validator-vanilla-javascript-just-validate/
https://www.cssscript.com/bootstrap-native-validator/

Ikzelf vind het netjes als je na afloop alle niet correct gevalideerde velden op te laten lichten:
https://i.ibb.co/7jN2yXD/afbeelding.png
Je kan altijd een begeleidende tekst invullen met: Dit veld is verplicht.

Met JavaScript kan je na een niet correct validatie de rode stijl dan aanroepen. onBlur is het event daarvoor.

Voor de PHP-zaken gebruik ik deze class: https://github.com/SandroMiguel/verum-php
Nederlandse vertaling van mij krijg je er gratis bij ;-)
Gewijzigd op 21/02/2022 23:17:10 door - Ariën -
 
Jorn Reed

Jorn Reed

21/02/2022 23:26:32
Quote Anchor link
Top bedankt voor je uitleg!
Ikzelf ben het met je eens. een niet correcte input rood maken voor een gebruiker is fijn. Zou je bijvoorbeeld bij die front end validators ook stapsgewijs kunnen doen? Dus bij stap 1, controleer naam, achternaam, geslacht. stap 2 controleer gebrootedatum, adres etc?

Verder vind ik met PHP valideren veel makkelijker, maar geef ik je groot gelijk, niet het wiel opnieuw uitvinden maar een fijn naar keuze package gebruiken. :)
 
- Ariën  -
Beheerder

- Ariën -

21/02/2022 23:33:57
Quote Anchor link
Dan zul je dat via PHP moeten doen, en naar ?step=2 gaan etc, en in een sessie bijhouden bij welke stap je bent als alles gevalideerd is. Stel dat je wegklikt, dan wil je niet bij de eerder gevalideerde stap 1 opnieuw beginnen
 
Jorn Reed

Jorn Reed

21/02/2022 23:37:07
Quote Anchor link
Oh oke, ik had het echter iets anders in gedachten. Dat de stappen geregeld worden via JS, en dat PHP pas komt kijken op het moment dat je op submit klikt, bij de laatste stap.
 
Ward van der Put
Moderator

Ward van der Put

22/02/2022 06:31:04
Quote Anchor link
De nieuwste autocomplete hints worden nog (te) weinig gebruikt:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
 
Jorn Reed

Jorn Reed

22/02/2022 08:53:45
Quote Anchor link
Maar iets als een object maken per stap is geen goede optie?

iets als
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
if(index == 2){
 validator = {
   'fname': { type: 'text', required: 'required',},
    'gender': { type: 'radio', required: 'required', },
 };
}
Gewijzigd op 22/02/2022 08:54:13 door Jorn Reed
 
Ad Fundum

Ad Fundum

22/02/2022 22:15:10
Quote Anchor link
Ward van der Put op 22/02/2022 06:31:04:
De nieuwste autocomplete hints worden nog (te) weinig gebruikt:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Dat is ook niet zo vreemd, want het werkt niet. Niet bij mij, en waarschijnlijk ook niet op browsers van andere mensen. Misschien ligt het aan de privacy-instellingen?

Bij een aantal HTML5-dingetjes die browserafhankelijk zijn werken gewoon niet lekker, zoals de datumkiezer. Als je dan een datum wilt presenteren met wat meer metadata van de agenda, of op een bepaalde manier, dan moet je het toch weer zelf bouwen. Opnieuw en opnieuw en opnieuw en opnieuw.

Net als form-validatie in PHP. Dat doe ik niet meer, ik gooi het meteen naar de database. Daar zitten de CONSTRAINTS op de velden, met commentaar op de constraints wat de bedoeling is. Als er bijvoorbeeld een CHECK misgaat, toont-ie het commentaar van de constraint, en hoef ik verder niets meer te programmeren.

Maar iedereen moet altijd z'n eigen wiel uitvinden als onderdeel van z'n eigen leerproces. Heb ik ook gedaan.
 
Jorn Reed

Jorn Reed

27/02/2022 22:57:53
Quote Anchor link
Ik vind zelf het valideren van data in PHP altijd nog wel erg fijn, en makkelijker dan in JS haha. Verder gebruik ik in PHP ook altijd wel libraries/packages om zo wel de veiligste manier te gebruiken.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

28/02/2022 00:17:33
Quote Anchor link
Nog niet benoemd maar wel belangrijk is dat javascript validatie heel erg makkelijk omzeild kan worden en dus heb je ten aller tijden ook php validatie nodig. maw javascript validatie is GEEN vervanger voor php validatie. Het toevoegen van javascript validatie maakt je formulier wel gebruiksvriendelijker.

Als je formulieren wilt maken in een aantal stappen zou je ook gebruik kunnen maken van verborgen content op je pagina. Hierdoor lijkt het voor de gebruiker alsof hij een aantal stappen doorloopt maar komt je formulier uiteindelijk pas aan het einde in 1 keer binnen op de server (php dus). Daarnaast kun je voor validatie ook AJAX gebruiken. Javascript verzend dan gegevens naar de server en de server verstuurd een antwoord terug naar javascript waarna javascript bijvoorbeeld een foutmelding kan tonen of een rood kader kan tekenen om een formulier veld.
 
Jorn Reed

Jorn Reed

28/02/2022 09:37:57
Quote Anchor link
Jup ik gebruik normaal altijd PHP voor de belangrijkste validatie. Overigens heb ik normaal dan ook geen Javascript nodig voor form validatie. Alleen nu ik met een stappen formulier werk, komt dat er wel bij kijken, omdat je de gebruiker pas naar de volgende stap wilt laten gaan, als al het verplichtte is ingevuld per stap. Met een ajax call per stap zou dit heel makkelijk kunnen. Maar toch voelt het zelf niet zo fijn om het zo te doen. Is dat wel de meest aangeraden manier om dat zo te doen?

Toevoeging op 28/02/2022 09:38:43:

Jorn Reed op 28/02/2022 09:37:57:
Jup ik gebruik normaal altijd PHP voor de belangrijkste validatie. Overigens heb ik normaal dan ook geen Javascript nodig voor form validatie. Alleen nu ik met een stappen formulier werk, komt dat er wel bij kijken, omdat je de gebruiker pas naar de volgende stap wilt laten gaan, als al het verplichtte is ingevuld per stap. Met een ajax call per stap zou dit heel makkelijk kunnen. Maar toch voelt het zelf niet zo fijn om het zo te doen. Is dat wel de meest aangeraden manier om dat zo te doen?

Dus bijv bij stap 1 op 'next step' klikken dat je een ajax call doet die bijv `fname, lname, birthdate, gender` controleert. etc etc?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

28/02/2022 17:27:01
Quote Anchor link
>> Met een ajax call per stap zou dit heel makkelijk kunnen. Maar toch voelt het zelf niet zo fijn om het zo te doen. Is dat wel de meest aangeraden manier om dat zo te doen?

Ik had dat gevoel vroeger ook maar uiteindelijk maakt het geen bal uit. Naar elke PHP pagina kan namelijk door heel de wereld data mee gestuurd worden, of dat nou via javascript of een request is met CURL vanaf een andere machine (lees bot) of gewoon vanuit de URL balk van een browser. De pagina kan daarnaast in elk denkbaar request methode aangeroepen worden waaronder de GET en POST methode.

Het is aan jou wat je met deze data doet. En het is aan jou wanneer je data als valide beschouwt en wanneer niet. Tevens kun je ook met Ajax zorgen voor een Cross-Site Request Forgery (CSRF) bescherming. En kun je checken of de data die je ontvangt klopt met het aantal formuliervelden dat je verwacht.

En natuurlijk gebruik je een beveiligde verbinding (https://)
 
Jorn Reed

Jorn Reed

28/02/2022 21:15:47
Quote Anchor link
Yes thanks voor de uitleg. Ja wat je zegt, in programmeren is er ook nooit echt een beste manier, maar zijn er meerdere. Ik loop nu bijv. ook tegen het probleem aan, dat je aan de hand van bepaalde formulier data andere stappen daarna moet inladen. Dat levert best veel spaghetti code op. Tenzij ik het echter met iets als Vue/React zou maken.
 



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.