Beste manier om een multi-step form te maken.
Ik loop al langer tegen dit probleem aan. Wat is nou de beste manier om een meerdere stappen formulier te bouwen?
Het stukje JS, dat er voor zorgt dat je van stap naar stap gaat is het probleem niet. Waar ik tegen aanloop is de validatie. Uiteraard valideer ik alles op het eind met PHP. Maar daarvoor wil je er natuurlijk voor zorgen, dat je pas naar de volgende stap kan, als bijvoorbeeld stap 1 volledig is ingevuld(in ieder geval welke velden verplicht zijn).
Uiteraard kan ik per stap door de inputs loopen, kijken of ze leeg zijn en wat voor soort veld, en daar dan een regex aan koppelen.
Maar als ik bijvoorbeeld radio buttons wil gebruiken. Dan weet ik even niet verder wat ik moet doen. Aangezien dat als je door inputs loopt, en je hebt bijvoorbeeld 4 radio buttons voor 'color', dan loopt hij 4 keer door color heen, omdat het technisch gezien 4 input elementen zijn. En is dat altijd correct omdat het al een waarde bevat in de `value=""`.
Ook had ik gedacht aan een multiple step form door elke stap gewoon een eigen <form> element te geven. Hier kan ik door makkelijk met `required` attribuut werken. En aan de hand van de form submit knoppen, de volgende/vorige stap tonen wanneer, een stap voltooid is.
Wat is volgens jullie de beste oplossing?
- Ariën - op 31/05/2022 15:44:40:
Je zult minimaal serverside moeten controleren. AJAX kan een mooi hulpmiddel hiervoor zijn.
Jup dat nam ik volgens mij ook mee in mijn bericht. Dat komt sowieso wel goed, het ging mij meer een beetje om het stap voor stap valideren. Daar heb ik moeite mee, omdat JS niet mijn beste kant is haha.
Ik liep dus ook tegen hetzelfde probleem aan, en heb daar een hele oplossing opheen bedacht op basis van het traditionele AJAX idioom.
Ik heb een SPA, waarin met een enkel XHR-verzoek meerdere onderdelen op het scherm achter elkaar worden bijgewerkt.
Het formulier wordt gebouwd vanuit PHP, en daar waar iets dynamisch moet, maak ik alleen een div-element. Meteen daarna roept PHP een andere functie aan die het dynamsche deel levert, gekoppeld aan de ID van die div. PHP stuurt in één XHR-verzoek beide gegevens door naar de browser, die het stap voor stap afwerkt. Eerst plaatst die het formulier in de div waar het moet, en dan het dynamische deel in die lege div in het formulier.
Het voordeel van deze aanpak is dat er in PHP dan twee functies zijn voor validatie, ik noem dat het hoofdformulier en het deelformulier. Mocht er in het hoofdformulier een waarde wijzigen, waardoor het deelformulier wel of niet getoond moet worden (of een ander deelformulier), dan wordt alleen de PHP functie van het deelformulier aangeroepen.
Voor het aanroepen vanuit JS heb ik een (doorgaans onchange) event dat bijbehorende data verzamelt, en in een JS postData object meestuurt, voor die PHP functie voor het deelformulier.
Deze werkwijze werkt erg goed, ook voor UX, maar het nadeel is dat het arbeidsintensief is om te maken. Mijn volgende stap wordt om dat bouwen en valideren van (deel)formulieren te automatiseren aan de hand van metadata in de database. Dan ga je meer richting low-code waarbij je genoeg hebt aan een grafische database client voor het bouwen van dynamische formulieren.
Als er nog andere suggesties zijn houd ik mij aanbevolen.
Ad Fundum op 01/06/2022 09:06:00:
JS vind ik ook vervelend, ik hoop dat WebAssembly daar binnenkort verandering in gaat brengen.
Ik liep dus ook tegen hetzelfde probleem aan, en heb daar een hele oplossing opheen bedacht op basis van het traditionele AJAX idioom.
Ik heb een SPA, waarin met een enkel XHR-verzoek meerdere onderdelen op het scherm achter elkaar worden bijgewerkt.
Het formulier wordt gebouwd vanuit PHP, en daar waar iets dynamisch moet, maak ik alleen een div-element. Meteen daarna roept PHP een andere functie aan die het dynamsche deel levert, gekoppeld aan de ID van die div. PHP stuurt in één XHR-verzoek beide gegevens door naar de browser, die het stap voor stap afwerkt. Eerst plaatst die het formulier in de div waar het moet, en dan het dynamische deel in die lege div in het formulier.
Het voordeel van deze aanpak is dat er in PHP dan twee functies zijn voor validatie, ik noem dat het hoofdformulier en het deelformulier. Mocht er in het hoofdformulier een waarde wijzigen, waardoor het deelformulier wel of niet getoond moet worden (of een ander deelformulier), dan wordt alleen de PHP functie van het deelformulier aangeroepen.
Voor het aanroepen vanuit JS heb ik een (doorgaans onchange) event dat bijbehorende data verzamelt, en in een JS postData object meestuurt, voor die PHP functie voor het deelformulier.
Deze werkwijze werkt erg goed, ook voor UX, maar het nadeel is dat het arbeidsintensief is om te maken. Mijn volgende stap wordt om dat bouwen en valideren van (deel)formulieren te automatiseren aan de hand van metadata in de database. Dan ga je meer richting low-code waarbij je genoeg hebt aan een grafische database client voor het bouwen van dynamische formulieren.
Als er nog andere suggesties zijn houd ik mij aanbevolen.
Ik liep dus ook tegen hetzelfde probleem aan, en heb daar een hele oplossing opheen bedacht op basis van het traditionele AJAX idioom.
Ik heb een SPA, waarin met een enkel XHR-verzoek meerdere onderdelen op het scherm achter elkaar worden bijgewerkt.
Het formulier wordt gebouwd vanuit PHP, en daar waar iets dynamisch moet, maak ik alleen een div-element. Meteen daarna roept PHP een andere functie aan die het dynamsche deel levert, gekoppeld aan de ID van die div. PHP stuurt in één XHR-verzoek beide gegevens door naar de browser, die het stap voor stap afwerkt. Eerst plaatst die het formulier in de div waar het moet, en dan het dynamische deel in die lege div in het formulier.
Het voordeel van deze aanpak is dat er in PHP dan twee functies zijn voor validatie, ik noem dat het hoofdformulier en het deelformulier. Mocht er in het hoofdformulier een waarde wijzigen, waardoor het deelformulier wel of niet getoond moet worden (of een ander deelformulier), dan wordt alleen de PHP functie van het deelformulier aangeroepen.
Voor het aanroepen vanuit JS heb ik een (doorgaans onchange) event dat bijbehorende data verzamelt, en in een JS postData object meestuurt, voor die PHP functie voor het deelformulier.
Deze werkwijze werkt erg goed, ook voor UX, maar het nadeel is dat het arbeidsintensief is om te maken. Mijn volgende stap wordt om dat bouwen en valideren van (deel)formulieren te automatiseren aan de hand van metadata in de database. Dan ga je meer richting low-code waarbij je genoeg hebt aan een grafische database client voor het bouwen van dynamische formulieren.
Als er nog andere suggesties zijn houd ik mij aanbevolen.
Dus als opties zijn er bijvoorbeeld, het tonen van de volgende/vorige stap aan de hand van een ajax call, die ook gelijk de validatie in de backend doet?