Contrib.social

Paragraph field still validating when #states changed to optional

Open on Drupal.org →
Created on 31 December 2021, almost 3 years ago
Updated 9 October 2024, about 1 month ago

Problem/Motivation

I have changed the paragraph field's state using #states from required to optional. But when submit, it shows that field is required. I see Required * mark hide when uncheck the parent checkbox, not I can't submit the form because not value is selected in the dependent dropdown.

1. There is a controlling checkbox (multi-value enabled) i.e. "field_stories_source"
2. There is a dependent dropdown which a entity reference field of taxonomy type. This is initially set as Required. i.e. "field_category"
3. When the controlling checking is unchecked, I made the dependent dropdown "optional"
4. On submit, no javascript validation is showing But form submit validation is showing message that, dropdown field value is reuqire.

The reverse also not working. Like
If I make the dropdown initially not required and using #states I made it REQUIRED, the form is submitting without giving validation error. As the dropdown is an entity reference field of taxonomy, "_none" is representing the not select value. I suspect, due to this it might not giving validation error.

Steps to reproduce

/**
 * Implements hook_field_widget_WIDGET_TYPE_form_alter().
 */
function my_module_field_widget_paragraphs_form_alter(&$element, &$form_state, $context) {
  if ($element['#paragraph_type'] == 'my_paragraph_type') {
    $element['subform']['field_category']['widget']['#states'] = [
      'optional' => [
        ':input[name="field_paragraphs[0][subform][field_stories_source][1]"]' => ['unchecked' => TRUE],
      ],
    ];
  }
}

Or for the second part:

/**
 * Implements hook_field_widget_WIDGET_TYPE_form_alter().
 */
function my_module_field_widget_paragraphs_form_alter(&$element, &$form_state, $context) {
  if ($element['#paragraph_type'] == 'my_paragraph_type') {
    $element['subform']['field_category']['widget']['#states'] = [
      'required' => [
        ':input[name="field_paragraphs[0][subform][field_stories_source][1]"]' => ['checked' => TRUE],
      ],
    ];
  }
}

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

1.12

Component

Code

Created by

🇧🇩Bangladesh shafiqhossain

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment about 1 month ago →
    🇫🇷France mably

    Thanks @jhuhta, your small comment saved my day 🙂

    When using the States API in a paragraph, you have to use a different syntax for the :required filter than the invisible filter for example.

    You have to add that ['widget'][0 or whatever delta you have]['value'] before ['#states'] = [...]..

    Here is the final working code of my hook:

    /**
 * Implements hook_field_widget_single_element_form_alter().
 */
function my_module_field_widget_single_element_form_alter(&$element, FormStateInterface $form_state, $context) {

  if (isset($element['#paragraph_type']) && $element['#paragraph_type'] === 'my_paragraph_type') {

    $parents_array = $element['subform']['#parents'];
    $parents = array_shift($parents_array) . '[' . implode('][', $parents_array) . ']';
    
    $element['subform']['field_title']['#states'] = [
      'invisible' => [
        ':input[name="' .$parents . '[field_display_mode][0][value]"]' => ['value' => 'three'],
      ]
    ];

    $element['subform']['field_title']['widget']['0']['value']['#states'] = [
      'required' => [
        ':input[name="' .$parents . '[field_display_mode][0][value]"]' => ['value' => 'two'],
      ],
    ];
  }
}
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024