Preserve ajax call status

Question

I'm trying to hide/disable field when the user select an option (Example at images).

Image A Image B

I've tried to used AJAX, JS or #states from Drupal 7, and it works, but when the user press "Submit" and the "Validate" method throws a "form set error", the selected item does not correspond to the status of the fields (Disable/Hide). It takes the default values from $form element definition. Is there any way to do it? Thanks for comment and help!

PD: Ajax callback is associated to the radio group and it change the field states.

Form:

// Schedule fieldset.
$form['schedule'] = [
  '#prefix' => '<div class="booking-fieldset-wrapper">',
  '#suffix' => '</div>',
  '#title'  => t('Schedule'),
  '#type'   => 'fieldset',
  '#weight' => $weight++,
];
// Schedule pattern type.
$form['schedule']['pattern_type'] = [
  '#prefix'        => '<div class="row"><div class="col-md-5">',
  '#suffix'        => '</div>',
  '#ajax'          => [
    'callback' => 'w_tpgal_services_bookings_schedule_callback',
  ],
  '#type'          => 'radios',
  '#title'         => t('Select the requested type of schedule'),
  '#options'       => [
    BookingDTO::EVERY_X_DAYS    => t('Every X days (Daily)'),
    BookingDTO::EVERY_X_WEEKS   => t('Every X weeks (Weekly)'),
    BookingDTO::PICK_DATE_RANGE => t('Pick date range'),
  ],
  '#required'      => TRUE,
  '#default_value' => !empty($form_state['values']) && !empty($form_state['values']['pattern_type']) ? $form_state['values']['pattern_type'] : BookingDTO::EVERY_X_DAYS,
];
// Frequency.
$form['schedule']['options']['frequency'] = [
  '#attributes'    => [
    'class' => ['js-select2'],
  ],
  '#prefix'        => '<div class="row"><div class="col-md-6">',
  '#suffix'        => '</div>',
  '#options'       => ['' => t('-- Select --')] + $freq_options,
  '#default_value' => '',
  '#type'          => 'select',
  '#title'         => t('Frequency') . ' ' . theme_form_required_marker([]),
  //      '#states'        => [
  //        'disabled' => [
  //          ':input[name="pattern_type"]' => ['value' => BookingDTO::PICK_DATE_RANGE],
  //        ],
  //        'enabled'  => [
  //          ':input[name="pattern_type"]' => ['!value' => ''],
  //        ],
  //      ],
];
// Pattern days.
$form['schedule']['options']['pattern_days'] = [
  '#attributes' => [
    'class' => ['js-select2'],
  ],
  '#prefix'     => '<div class="col-md-6">',
  '#suffix'     => '</div></div></div></div>',
  '#type'       => 'select',
  '#title'      => t('Day') . ' ' . theme_form_required_marker([]),
  '#options'    => [
    ''                        => t('-- Select --'),
    BookingDTO::DAY_MONDAY    => t('Monday'),
    BookingDTO::DAY_TUESDAY   => t('Tuesday'),
    BookingDTO::DAY_WEDNESDAY => t('Wednesday'),
    BookingDTO::DAY_THURSDAY  => t('Thursday'),
    BookingDTO::DAY_FRIDAY    => t('Friday'),
    BookingDTO::DAY_SATURDAY  => t('Saturday'),
    BookingDTO::DAY_SUNDAY    => t('Sunday'),
  ],
  //      '#states'     => [
  //        'enabled'  => [
  //          ':input[name="pattern_type"]' => ['value' => BookingDTO::EVERY_X_WEEKS],
  //        ],
  //        'disabled' => [
  //          ':input[name="pattern_type"]' => ['!value' => ''],
  //        ],
  //      ],
];

Ajax:

function w_tpgal_services_bookings_schedule_callback($form, &$form_state) {
  $commands = [];

  // Get selected option.
  if (!empty($form_state['values']['pattern_type'])) {
    $option = $form_state['values']['pattern_type'];

    switch ($option) {
      case BookingDTO::EVERY_X_DAYS:
        $form['schedule']['options']['pattern_days']['#attributes']['disabled'] = TRUE;
        unset($form['schedule']['options']['frequency']['#attributes']['disabled']);
        break;

      case BookingDTO::EVERY_X_WEEKS:
        unset($form['schedule']['options']['pattern_days']['#attributes']['disabled']);
        unset($form['schedule']['options']['frequency']['#attributes']['disabled']);
        break;

      case BookingDTO::PICK_DATE_RANGE:
        $form['schedule']['options']['pattern_days']['#attributes']['disabled'] = TRUE;
        $form['schedule']['options']['frequency']['#attributes']['disabled']    = TRUE;
        break;
    }
  }
  $commands[] = ajax_command_replace('.schedule-fieldset-wrapper', render($form['schedule']['options']));

  return ['#type' => 'ajax', '#commands' => $commands];
}

Answer 1

Disabled fields do not get submitted in form submit. If you want to mandate field's based on the select list of "pattern_type" use below code with required in #states.:

// Schedule fieldset.
  $form['schedule'] = [
    '#prefix' => '<div class="booking-fieldset-wrapper">',
    '#suffix' => '</div>',
    '#title' => t('Schedule'),
    '#type' => 'fieldset',
    '#weight' => $weight++,
  ];
// Schedule pattern type.
  $form['schedule']['pattern_type'] = [
    '#type' => 'radios',
    '#title' => t('Select the requested type of schedule'),
    '#options' => [
      BookingDTO::EVERY_X_DAYS => t('Every X days (Daily)'),
      BookingDTO::EVERY_X_WEEKS => t('Every X weeks (Weekly)'),
      BookingDTO::PICK_DATE_RANGE => t('Pick date range'),
    ],
    '#required' => TRUE,
    '#default_value' => !empty($form_state['values']) && !empty($form_state['values']['pattern_type']) ? $form_state['values']['pattern_type'] : BookingDTO::EVERY_X_DAYS,
  ];
// Frequency.
  $form['schedule']['options']['frequency'] = [
    '#attributes' => [
      'class' => ['js-select2'],
    ],
    '#options' => ['' => t('-- Select --')] + $freq_options,
    '#default_value' => '',
    '#type' => 'select',
    '#title' => t('Frequency') . ' ' . theme_form_required_marker([]),
    '#states' => [
      'disabled' => [
        ':input[name="pattern_type"]' => ['value' => BookingDTO::PICK_DATE_RANGE],
      ],
      'required' => [
        ':input[name="pattern_type"]' => [['value' => BookingDTO::EVERY_X_DAYS], ['value' => BookingDTO::EVERY_X_WEEKS]],
      ],
    ],
  ];
// Pattern days.
  $form['schedule']['options']['pattern_days'] = [
    '#attributes' => [
      'class' => ['js-select2'],
    ],
    '#type' => 'select',
    '#title' => t('Day') . ' ' . theme_form_required_marker([]),
    '#options' => [
      '' => t('-- Select --'),
      BookingDTO::DAY_MONDAY => t('Monday'),
      BookingDTO::DAY_TUESDAY => t('Tuesday'),
      BookingDTO::DAY_WEDNESDAY => t('Wednesday'),
      BookingDTO::DAY_THURSDAY => t('Thursday'),
      BookingDTO::DAY_FRIDAY => t('Friday'),
      BookingDTO::DAY_SATURDAY => t('Saturday'),
      BookingDTO::DAY_SUNDAY => t('Sunday'),
    ],
    '#states' => [
      'enabled' => [
        ':input[name="pattern_type"]' => ['value' => BookingDTO::EVERY_X_WEEKS],
      ],
      'required' => [
        ':input[name="pattern_type"]' => ['value' => BookingDTO::EVERY_X_WEEKS],
      ],
    ],
  ];