ingevulde form kopieren naar andere div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Dennis WhoCares

Dennis WhoCares

14/03/2018 09:28:24
Quote Anchor link
Hi allemaal,

voor een registratieformulier gebruik ik BootstrapValidator.
Graag wil ik een 2e pagina ter 'bevestiging' voorkomen.

Ik heb geprobeerd om de velden te disablen, en een tekst te geven om alles te controlleren en te bevestigen, of annuleren zodat ze weer kunnen aanpassen.

Dit werkt, maar zodra ze op annuleren hebben geklikt werkt de eerste submit knop niet icm de validator.

Hiervoor dacht ik:
Ik kopieer gewoon de gehele div, naar een nieuwe waar ik alles disable en de originele verberg.

Alleen... Is de input die de gebruiker ingevuld heeft niet meegenomen..
Ik wil dit graag zo dynamisch mogelijk houden, dus zonder dat ik alle input fields.val() apart hoef te kopieren enz.

Is dit mogelijk?
 
PHP hulp

PHP hulp

29/03/2024 10:49:59
 
Thomas van den Heuvel

Thomas van den Heuvel

14/03/2018 17:15:32
Quote Anchor link
Quote:
Dit werkt, maar zodra ze op annuleren hebben geklikt werkt de eerste submit knop niet icm de validator.

Heb je geprobeerd om te achterhalen waardoor dit komt? Want dan is je probleem in principe opgelost?

Maar correct me if I'm wrong, die BootstrapValidator is er toch in de eerste plaats voor om je form te valideren en niet te submitten zolang de velden niet aan bepaalde regels of patronen (die de Validator controleert) voldoen? Dus je zou in eerste instantie toch niet wegnavigeren als je niet-kloppende invoer probeert te submitten? Als je niet wegnavigeert gaat er toch ook geen informatie verloren?

Dit doet mij vermoeden dat de Validator niet helemaal naar behoren werkt? Beschrijf de "flow" van iemand die iets invult eens, en wat er achtereenvolgens zou moeten gebeuren, hoe zou het formulier zich moeten "gedragen" en hoe wijkt dit af van wat er nu gebeurt? Het klinkt alsof je allemaal hulpstukken in het leven roept om iets voor elkaar te krijgen, maar zijn die hulpstukken wel nodig als de Validator zijn ding doet?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

14/03/2018 17:40:29
Quote Anchor link
>> Graag wil ik een 2e pagina ter 'bevestiging' voorkomen.

Wat bedoel je hier precies mee? Met ieder formulier is het stappenplan als volgt:

- formulier tonen
- formulier valideren
- validatie mislukt: terug naar formulier tonen (Maar nu met reeds ingevulde gegevens en wat hints).
- validatie geslaagd: Verwerk de gegevens en stuur de gebruiker weg van het formulier. Toon een melding, of ga door naar het volgende formulier (of stap).

>> Ik heb geprobeerd om de velden te disablen, en een tekst te geven om alles te controlleren en te bevestigen, of annuleren zodat ze weer kunnen aanpassen.

Dit is dus stap 2. Een nieuw formulier (al zijn het maar twee knoppen), validatie mag je vergeten omdat er niets foutief ingevoerd kan worden. Verwerk de gegevens en stuur de gebruiker weg..

>> Hiervoor dacht ik:
Ik kopieer gewoon de gehele div, naar een nieuwe waar ik alles disable en de originele verberg.

Je kunt json .serialize() gebruiken om de data uit een formulier te halen. Ik zou zelf niet met disabled formfields werken maar gewoon een tabel met twee kolommen. de eerste kolom komt de label van het formulierveld en de tweede een waarde.
 
Rob Doemaarwat

Rob Doemaarwat

14/03/2018 18:21:59
Quote Anchor link
Dennis WhoCares op 14/03/2018 09:28:24:
HIk wil dit graag zo dynamisch mogelijk houden, dus zonder dat ik alle input fields.val() apart hoef te kopieren enz.

Je kunt dit vrij generiek houden door gewoon met een selector alle velden te selecteren, en dan met .each() d'r doorheen te gaan. Als je dan een keer een veld toevoegt (of verwijderd) hoef je niks aan te passen.
 
Dennis WhoCares

Dennis WhoCares

14/03/2018 18:46:18
Quote Anchor link
Dag allemaal,

@Thomas: klopt, validator vangt het formulier af zolang de validators niet kloppen.
- user vult gegevens in
-- live validation (front end)
- user submit form
- user moet nogmaals z'n data kunnen bekijken en nogmaals op een verzendknop drukken of kunnen annuleren

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$('#register_form').bootstrapValidator({
        feedbackIcons: {
            valid: 'fa fa-check',
            invalid: 'fa fa-exclamation',
            validating: 'fa fa-refresh'
        },
        fields: {
            register_email: {
                validators: {
                    notEmpty: {
                        message: 'Geen emailadres opgegeven'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
                        message: 'Ongeldig emailadres opgegeven'
                    }
                }
            },
            register_password: {
                validators: {
                    notEmpty: {
                        message: 'Geen wachtwoord opgegeven'
                    },
                    regexp: {
                        regexp: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
                        message: 'Minimaal 8 karakters lang, een letter en getal'
                    }
                }
            },
            register_password2: {
                validators: {
                    notEmpty: {
                        message: 'Geen wachtwoord opgegeven'
                    },
                    identical: {
                        field: 'register_password',
                        message: 'Wachtwoorden komen niet overeen'
                    }
                }

            }
        }
    })
    .on('success.form.bv', function(event) {
        //actie dat uitgevoerd wordt voordat t formulier verzonden wordt
    });


Maar ik heb dus ook een event.preventDefault() op de werkelijke form submit.

Ik wil niet dat ie gelijk verzonden wordt, maar dat alles disabled wordt, en de originele <button type="submit"> verborgen wordt, en dus de gebruiker nog de kans geef om alles te herzien en nogmaals te bevestigen met een nieuwe knop.

Wellicht is het een probleem in de validator dat ie het niet leuk vind als ik alle input disable en weer enable.
Dat kan zeer zeker, ik kan ook geen use-cases vinden zoals ik dat wil.
Heb wel gezocht over het 'rebinden' ervan, maar het grappige is dat deze validator eigenlijk 'end-of-life' is en is vervangen door formValidation.io welke je moet betalen.. :(


@Frank,
zoals ik al aangaf, moet de gebruiker nog de kans krijgen om z'n invoer te herzien voordat t werkelijk verzonden wordt, hierna gaan we ook gelijk door naar de betaal pagina.
Maar ik wil geen 2e aparte pagina voor bevestiging, en moet zo dynamisch mogelijk blijven.
Als de klant toch weer bedenkt om nieuwe velden te willen of andere te laten vervallen, wil k niet alles aanpassen natuurlijk ;-)

Daarop gelijk de reactie op je tabel betreft de bevestiging, vind ik het netter/mooier als er zo min mogelijk veranderd voor de eindgebruiker.

Uiteindelijk heb ik op de backend nog eendezelfde validator in php, omdat ik niemand nooit niet vertrouw.
Misschien denken sommige dat is paranoide maar ik ben zelf ook zo iemand die houdt van klooien ;-)

@Rob,
Je hebt gelijk, dit zou ik kunnen doen. Moet ik ff uitzoeken hoe ik dat doe met radio's en checkmarks, maar komt vast wel goed :) Ik denk dat dit een van de makkelijkere oplossingen is.

Enorm bedankt voor jullie reacties! Ik ga het eens proberen zoals Rob het aangaf.
Gewijzigd op 14/03/2018 18:47:46 door Dennis WhoCares
 
Thomas van den Heuvel

Thomas van den Heuvel

14/03/2018 19:19:17
Quote Anchor link
Je zou die "bevestig" knop ook kunnen zien als een extra knop in het formulier, die initieel verborgen is, en een validatieregel hiervoor kunnen opstellen? De eerste keer dat er op submit geklikt wordt toon je de "foutboodschap" (controleer uw gegevens dialoog) en de enige correcte waarde voor deze knop is "bevestigen". Dus wat als je de Validator-validatie doortrekt waarbij je ook de bevestig-knop hier in betrekt?
 
Dennis WhoCares

Dennis WhoCares

14/03/2018 20:46:48
Quote Anchor link
Hi Thomas,

ik moet het inderdaad gewoon niet zo moeilijk maken.

Thanks! Het heeft me nu zojuist de doorslag gegeven...
 
Frank Nietbelangrijk

Frank Nietbelangrijk

14/03/2018 20:47:53
Quote Anchor link
Ik zeg ook niet dat een tweede pagina nodig is. Ik zeg dat je de logische volgorde moet aanhouden.
Ik zou gaan voor een AJAX submit. Je MOET* namelijk het formulier OOK in php valideren. Als deze validatie mislukt is er geen enkele reden om een gebruiker zijn ingevulde gegevens te laten controleren en op "akkoord" te laten klikken. De formuliergegevens na validatie sla je gewoon op in de SESSIE en haal je er weer uit nadat de klant op "akkoord" geklikt heeft.

* Validatie in Javascript kan super eenvoudig omzeild worden en dus kun je nog steeds de vreemdste dingen in je PHP applicatie krijgen als je niet in PHP valideert.

Toevoeging op 14/03/2018 20:50:55:

Overigens begrijp ik de onwil niet van een tweede pagina. Wat maakt het uit? Het blijven twee stappen...
Gewijzigd op 14/03/2018 20:48:52 door Frank Nietbelangrijk
 



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.