Webform show/hide mandatory fields

Question

I use D8 and I have a webform with multiple fields. One of my fields is a radio button and one other id address (with the fields address 1(mandatory), address 2 (not mandatory), city(mandatory), post code (mandatory) and country(mandatory).

I'm trying to hide the address field using the conditions given in the webform module and I managed to hide them. The problem is that when i try to submit the form while address field is hidden, the submission fails as those fields are mandatory and needs some value.

I added an extra condition that makes the address field 'required' when the value of my radiobutton is 'Yes' but when is triggered makes all the address subfields mandatory.

Check my YAML below:

field_address_different_to_s1:
  '#type': radios
  '#title': 'Is address different to organisation address in ‘Section 1'
  '#default_value': 'Yes'
  '#title_display': before
  '#options': yes_no
  '#options_display': two_columns
  '#required': true
  '#access_create_roles':
    - authenticated
  '#access_update_roles':
    - authenticated
  '#access_view_roles':
    - authenticated
address_s3:
  '#type': address
  '#title': Address
  '#default_value':
    address_s3: ''
    address_2_s3: ''
    city_s3: ''
    state_province_s3: ''
    postal_code_s3: ''
    country_s3: ''
  '#states':
    visible:
      ':input[name="field_address_different_to_s1"]':
        value: 'Yes'
    required:
    ':input[name="field_address_different_to_s1"]':
        value: 'Yes'
  '#access_create_roles':
    - authenticated
  '#access_update_roles':
    - authenticated
  '#access_view_roles':
    - authenticated
  '#address__required': true
  '#city__title': City
  '#city__required':
    ':input[name="field_address_different_to_s1"]':
      value: 'Yes'
  '#state_province__access': false
  '#postal_code__title': 'Post Code'
  '#postal_code__required':
    ':input[name="field_address_different_to_s1"]':
      value: 'Yes'
  '#country__type': textfield
  '#country__required':
    ':input[name="field_address_different_to_s1"]':
      value: 'Yes'

The #city__required, #postal_code__required and #postal_code__required initially were true but I changed them to ':input[name="field_address_different_to_s1"]': value: 'Yes' hoping that will work.

Also I tried to use javascript in order to remove the 'required' class and 'aria-required' attributes from the field and the label but this also didn't work.

Any other idea/ solution please?

Thanks in advance.

Answer 1

I posted a recipe on Drupal.org called How to create an optional different billing address composite element, which contains an working YAML code snippet.