ingevulde form kopieren naar andere div
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?
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?
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.
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.
@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)
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
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
});
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
ik moet het inderdaad gewoon niet zo moeilijk maken.
Thanks! Het heeft me nu zojuist de doorslag gegeven...
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