[#States API] Conditionally hidden required field gives error on submit

I'm able to to replicate this issue too. Select 'Recuse' in the attached form.

I was hoping this wasn't just a webform problem, but it is a webform problem.

@esod It works with Plain text format. I think it having problem with ckeditor.

In first webform issue, I have resolved by updating select_2 states

select_2:
    '#type': select
    '#title': 'Select 2'
    '#options':
      'Yes': 'Yes'
      'No': 'No'
    '#states':
      invisible:
        - ':input[name="select"]':
            value: A
        - or
        - ':input[name="select"]':
            value: C
      required:
        ':input[name="select"]':
          value: B
        ':input[name="select_1"]':
          value: 'Yes'

@nilesh.addweb Yes, it works with plain text format or a textarea, which is also plain text. We'd like this to work using a CKEditor 5 text_format element.

This form uses only textfield, radio elements and #states.

Open the Console on your browser.
Select 'I am the nominee.'
Fill out the form.
Click Submit.
See the 'An invalid form control...' error.

Open the Console on your browser.
Select 'I am submitting on behalf of the nominee.'
Fill out the form.
Click Submit.
The form submits.

For #10, you have two required conditions (submitter_information: visible and submitter_middle_name: required) that are conflicting. Note that submitter_information: visible sets required conditions on the subelements.

Your code

     submitter_information:
      '#type': fieldset
      '#title': 'Submitter Information'
      '#states':
        visible:
          ':input[name="nominee_select_one"]':
            value: submitter
      '#states_clear': false
      submitter_no_middle_name:
        '#type': checkbox
        '#title': 'No Middle Name'
        '#help_title': ' '
      flexbox_submitter_name:
        '#type': webform_flexbox
        submitter_first_name:
          '#type': textfield
          '#title': 'First Name'
          '#required': true
          '#flex': 3
        submitter_middle_name:
          '#type': textfield
          '#title': 'Middle Name'
          '#flex': 3
          '#states':
            required:
              ':input[name="submitter_no_middle_name"]':
                unchecked: true
            readonly:
              ':input[name="submitter_no_middle_name"]':
                checked: true
        submitter_last_name:
          '#type': textfield
          '#title': 'Last Name'
          '#required': true
          '#flex': 3

To fix this, you need to make the below change, which ensures both conditions for requiring submitter_middle_name are defined as expected.

      submitter_middle_name:
        '#type': textfield
        '#title': 'Middle Name'
        '#flex': 3
        '#states':
          required:
            ':input[name="nominee_select_one"]':
              value: submitter          
            ':input[name="submitter_no_middle_name"]':
              unchecked: true
          readonly:
            ':input[name="submitter_no_middle_name"]':
              checked: true

The original example seems to have the same nested condition issue as #10

I am realizing that this ticket has multiple conditional logic issues being mentioned, and it makes it very difficult to resolve any of them.

The original issue can be solved by ensuring a container's conditions are applied to the subelements that have additional conditional logic.

Please open new tickets for the other issues mentioned.

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.