Instead of merely hiding it, I'd like to prevent the Submit button from rendering all together based on a Computed Token or Computed Twig. I don't want either the Computed Token/Twig or the Submit button to be visible in the source code. What's the best way to accomplish this?
Let me preface this discussion with the following observation:
Currently in a multi-page form I can prevent elements in Page 1 from rendering if I conditionally hide them based on a Computed element in Page 2. And they won't just be hidden -- they won't render at all -- which is what I want to do with the Submit button. However, because the Submit button is apparently a special element in Webform, it cannot be made the child of any other elements and thus I can only hide it client-side which allows a hacker to make it visible and submit the form anyway (as well as see the expected variable name/value of the Computed Token/Twig because the #states logic is visible in the rendered Submit button code). If I were free to put a Submit button on every page instead of using one common button for the entire form, then I would have a solution, however I get the following error when I try to do that:
The Submit button(s) (webform_actions) is a root element that can not be used as child to another element.
Perhaps this is a feature request. I'm suggesting that it may be useful to have the ability to nest individual Submit buttons on pages for advanced validation, if practical. Otherwise I would appreciate some direction on how I might accomplish this.
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | 2929308-3.patch | 1.71 KB | jrockowitz |
Comments
Comment #2
jrockowitz commentedNesting the submit buttons could cause an unpredictable user experience. I am willing to write a patch to see what happens.
If you need to prevent a form from being submitted, you will need to use a WebformHandler or hook_form_alter() to validate and block the form from being submitted.
Comment #3
jrockowitz commentedHere is the patch. I am finding the UX of nested submit buttons to be a little overwhelming. For example, it very easy to create a page or preview that has no submit buttons on it.
Comment #5
nodecode commentedThank you much. I'd love to help make this a feature. Can you re-roll the patch for the latest dev? Can't wait to test!
Comment #6
nodecode commentedComment #7
jrockowitz commentedPatch applies fine to the latest dev release.
I am most likely not going to be committing this patch.
Comment #8
jrockowitz commentedComment #9
nodecode commentedI'm changing the of this issue because the following change to Webform allows me to use the method I was previously using: Actions (aka submit buttons) can now be nested inside a container
I'm not using the patch. The solution is to simply wrap the Submit button in a container and hide the container based on the value of a computed twig. The submit button will not simply be hidden, it will not even be rendered, which will securely prevent the user from proceeding further.