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.

CommentFileSizeAuthor
#3 2929308-3.patch1.71 KBjrockowitz

Comments

nodecode created an issue. See original summary.

jrockowitz’s picture

Nesting 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.

jrockowitz’s picture

Status: Active » Needs review
StatusFileSize
new1.71 KB

Here 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.

Status: Needs review » Needs work

The last submitted patch, 3: 2929308-3.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

nodecode’s picture

Status: Needs work » Needs review

Thank 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!

nodecode’s picture

Status: Needs review » Needs work
jrockowitz’s picture

Status: Needs work » Needs review

Patch applies fine to the latest dev release.

I am most likely not going to be committing this patch.

jrockowitz’s picture

Status: Needs review » Closed (won't fix)
nodecode’s picture

Status: Closed (won't fix) » Fixed

I'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.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.