[NastyaVs]

Код JS

document.addEventListener('DOMContentLoaded', function () {
  // Получаем элементы формы
  const firstName = document.getElementById('dataOrderFirstName');
  const lastName = document.getElementById('dataOrderLastName');
  const phone = document.getElementById('dataOrderPhone');
  const email = document.getElementById('dataOrderMail');
  const accasionSelect = document.getElementById('dataOrderAccasion');
  const accasionOptional = document.getElementById('accasionInputOptional');
  const radioOne = document.getElementById('termOneBoxForm');
  const radioTwo = document.getElementById('termOneBoxTwo');
  const radioThree = document.getElementById('termOneBoxThree');
  const confirmButton = document.getElementById('buttonConfirmReservationInForm');

  // Проверка на заполнение всех обязательных полей
  function checkFormValidity() {
      const isFirstNameFilled = firstName.value.trim() !== '';
      const isLastNameFilled = lastName.value.trim() !== '';
      const isPhoneFilled = phone.value.trim() !== '';
      const isEmailFilled = email.value.trim() !== '';
      const isAccasionSelected = accasionSelect.value !== 'valueNotGivenPopreserv'; // Проверяем, чтобы не было выбрано значение "None"
      const isRadioSelected = radioOne.checked || radioTwo.checked || radioThree.checked;

      // Проверка всех полей на заполнение
      if (isFirstNameFilled && isLastNameFilled && isPhoneFilled && isEmailFilled && isAccasionSelected && isRadioSelected) {
          confirmButton.disabled = false; // Активируем кнопку
      } else {
          confirmButton.disabled = true; // Деактивируем кнопку
      }
  }

  // Навешиваем события для проверки ввода данных в полях
  firstName.addEventListener('input', checkFormValidity);
  lastName.addEventListener('input', checkFormValidity);
  phone.addEventListener('input', checkFormValidity);
  email.addEventListener('input', checkFormValidity);
  
  // Отслеживание изменений в select (раскрывающий список)
  accasionSelect.addEventListener('change', function () {
      accasionOptional.value = accasionSelect.value; // Обновляем значение кастомного поля

      // Если выбрано значение "None", сразу делаем кнопку неактивной
      if (accasionSelect.value === 'valueNotGivenPopreserv') {
          confirmButton.disabled = true; // Деактивируем кнопку
      }

      // Проверяем остальные поля на валидность
      checkFormValidity();
  });

  // Проверка изменения радиокнопок
  radioOne.addEventListener('change', checkFormValidity);
  radioTwo.addEventListener('change', checkFormValidity);
  radioThree.addEventListener('change', checkFormValidity);

  // Делаем кнопку неактивной при загрузке страницы
  confirmButton.disabled = true;

  // Дополнительно проверим форму сразу при загрузке страницы
  checkFormValidity();
});

Помимо основного условия, что кнопка должна переходить из неактивного в активное состояние лишь в том случае когда все обязательные поля будут заполнены еще предусмотрено условие , что если в поле Select an accasion (optional) выбрано или изменено значение на None c id="valueNotGivenPopreserv" то кнопка Confirm reservation будет неактивной до тех пор пока не будет выбрано значение отличное от None. По умолчание в поле Select an accasion (optional) выбрано значение None которое замененено на запись в placeholder="Select an accasion (optional)". И в этом случае осуществляется некорректный переход кнопки из активного в активное состояние и наоборот.
А именно если первоначально заполнить все обязательные поля в форме, а поле Select an accasion (optional) оставить для заполнения в последнюю очередь, то после выбора значения отличного от None, кнопка не переходит в активное состояние до тех пор, пока не будет изменено любое другое значение из оставшихся обязательных полей.
Так же это происходит, когда осуществляется корректировка уже введенных значений. Если изменить в поле Select an accasion (optional) уже введенное значение на None, то кнопка не перейдет сразу в неактивное состояние как это я пытался сделать с помощью код, а перейдет лишь после того, когда будут изменены данные в любом другом обязательном поле.
На видео показано как это происходит
Помогите откорректировать код чтобы корректного отрабатывал для данного условие, которое предусматривается для поля Select an accasion (optional)