[sorry for the length of this message, I tried to provide a concise decription of my problem in order to make it easier for people to understand and help]

Hello all,

I have a webform comprised of 3 pages (two pages of input and a custom preview page).

I explain the whole webform in order to make my question more concise:

My first page has 4 inputs, all required (1 text field, 3 select fields). This works fine.

My second page is a little bit more complicated.

It has three ‘triples’, each triple consisting of: one checkbox, one select, one number.

None of these is required. The logic is that when one checkbox is checked (default value is unchecked), the subsequent select and number will be enabled, otherwise they are disabled (default).

You can find the code for one of these triples in the end of my post – the other two triples are similar.

This works ok, but my problem is this:

A valid submission should only happen when: a. at least one checkbox is checked AND b. the total sum of all number fields is in the range 3-30.

Note: I can’t simply force each number field to accept values in the range: 1-10, because user should be able to give up to 30 in one field and 0 on the other two.

I have used a computed_twig element and appropriate templates, and I have managed to put all my logic there and I show an appropriate message to the user. This works ok, so I have managed to print a green message when values are ok, and appropriate messages in red when values are invalid (if total sum is less than 3, or greater than 30 etc etc). I have covered all cases having enabled "Automatically update the computed value using Ajax" for the computed field, it updates on-the-fly and user has correct information on whether data is OK or NOT.

Now the problem and my question is:

I have been trying to hide the submit button, by selecting appropriate logic in the ‘conditions’ tab of the submit button. For example, something easy like "hide" or "disable" submit button, when pressure_total_thickness (computed twig value which holds the sum of individual number fields – same computed field which I successfully use for my messages) is greater than 30 ..

Problem is whatever I do there, the submit button is always present …

In a few words, what I want to do is validate data as much as I can in the front-end so that I don’t allow invalid submissions. I can do checks in the back-end (because data will subsequently be fed into another software) but it would be nice to do as much validation as possible in the front end and not allow submissions when data is invalid. Hence, use my computed_twig value which holds the sum of three number fields, and only show submit button when that value is between 3 – 30.

For example, here is the page with all three ‘triples’ – user has checked 2nd and 3rd checkboxes and supplied 15 and 30 values respectively. Total is 45, which is invalid and appropriate red message is written:

however, when user goes forward and reaches submit phase, the submit bitton is present although I use following condition to ‘hide’ it (have tried ‘disable’ in cindition, but same result – submit button was shown).

Here is the simple such condition for the submit button, trying to ‘hide’ it:

I tried to find documentation and/or previous questions/answers, but could not find anything relevant..

I must be doing something wrong, but I can’t find any way out of this ! ..

Webform is an amazing module, I am sure there is an easy way to achieve what I want. Any help would be appreciated!

Code for one of the three ‘triples’:

enable_insole:     '#type': checkbox     '#title': 'Enable Insole'     '#description': 'Please enable insole if you want to enter custom values below for material and layer thickness.'   select_insole_material:     '#type': select     '#title': 'Select Insole Material'     '#options':       1: Leather       2: 'Composite leather & elastomer'       3: EVA       4: Polyisoprene       5: 'Natural Rubber'       6: Polychloroprene       7: PTFE       8: PU-Foam     '#states':       disabled:         ':input[name="enable_insole"]':           unchecked: true     '#default_value': '0'   insole_layer_thickness:     '#type': number     '#title': 'Insole Layer Thickness'     '#help': 'See general help on choosing appropriate values for layers. Individual thickness for insole/midsole/outsole can have a range of 1-30 (mm), but total thickness of all layers  combined cannot exceed 30 (mm).'     '#states':       disabled:         ':input[name="enable_insole"]':           unchecked: true     '#default_value': '0'     '#min': 0     '#max': 30     '#step': 1