Wat is tegenwoordig nou de beste manier om form validatie uit te voeren?
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?
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:
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 -
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. :)
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
iets als
Code (php)
1
2
3
4
5
6
2
3
4
5
6
if(index == 2){
validator = {
'fname': { type: 'text', required: 'required',},
'gender': { type: 'radio', required: 'required', },
};
}
validator = {
'fname': { type: 'text', required: 'required',},
'gender': { type: 'radio', required: 'required', },
};
}
Gewijzigd op 22/02/2022 08:54:13 door Jorn Reed
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
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.
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.
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?
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://)