AI OnAI Off
Episerver Forms multi-step doesn't work with workInNonJSMode = true
Hi,
If your hidden steps contain required field, you should override the validatior "EPiServer.Forms.Implementation.Validation.RequiredValidator" and validate yourself. In that valiadate method, you can check if there is enough data for current submission then the method return valid state to make form submittable. Reading the EPiServerForms.js might give you a hint.
Hope this helps.
Sep 28, 2017 13:07
How would writing custom JS logic for validation help when you're using a mode that is supposed to work without JS? The multi-step form should work without JS when you're in workInNonJSMode since that mode is explicitly supposed to work without JS.
Sep 29, 2017 10:53
As I understand now, you are using multistep form with a required field in conditional step. The conditional step might display or not depend on previous step data. Is that right? And I tried to create that scenario and Forms sill can be submitted as normally. Am I missing something? Which Forms version are you using?
Oct 02, 2017 8:14
The example I've observed this does not have any dependency related to form responses, i.e. no branching of steps. workInNonJSMode is true.
Oct 02, 2017 12:54
Could you please give me exactly of reproduce steps, so I can see how it work on my local?
Oct 02, 2017 13:07
Set up Episerver form with 2+ steps, each of them with required fields, set workInNonJSMode to true.
The native browser validation should prevent you from submitting the form, due to the hidden required fields in subsequent steps being in the DOM and not filled out.
Oct 02, 2017 16:13
Not sure which version of Forms you are using. But I tried on latest version, the issue is not there. Could you check if the form element render with attribute novalidate like the image:
You might need update Forms to newer version.
Oct 03, 2017 4:07
Well that's just it, it should be possible to use native user agent validation in workInNonJSMode. The novalidate attribute turns off all validation in the form, which will then bypass the problem I'm describing, not solve it.
Oct 10, 2017 12:47
A multi-step Episerver Forms form does not seem to work if you set workInNonJSMode to true.
Each step is in its own section element within the same form, according to the default Forms templates.
The sections which are not the current one are hidden via CSS.
If there are any required input fields in hidden sections/steps, form submission will not work because the validation fails, and there's no way for the user to fill out the hidden required fields.
Using workInNonJSMode to set up your own validation scripting, or setting up a non-JS mode in general for the form, thereby will not work properly with multiple step forms.
A possible solution is to use one form element per step and using/altering the form attribute (which indicates what form it belongs to) on the form navigation buttons. Otherwise all required elements within hidden sections would need to be disabled, thereby allowing the browser submit validation to proceed correctly.
I'm also unsure whether you can roll your own validation using workInNonJSMode and a multi-step form, which should be possible.