Не меняется состояние disable у кнопки

Рейтинг: 0Ответов: 3Опубликовано: 09.03.2023

У меня есть валидация формы, и я хочу вешать на кнопку отправки формы disable в случае если не все поля заполнены корректно.
Код проверки на корректность формы:

function checkDispatchAvailability() {
  if ((getAvailability(firstDate.value) && getAvailability(secondDate.value)) &&
      (childCount.value + adultCount.value != 0 && adultCount > 0)) {
    popupSubmit.disabled = false;
  } else {
    popupSubmit.disabled = true;
  }
}

И на каждом поле внутри формы есть eventListener, внутри которого я вызываю эту функцию. Один из eventListener'ов:

firstDate.addEventListener("change", () => {
    const firstDateMessage = createMessage(getAvailability(firstDate.value));
    firstDateState.textContent = firstDateMessage[0];
    firstDateState.style.color = firstDateMessage[1];
    checkDispatchAvailability();
});

Проблема в том, что когда происходит смена поля, на кнопку вешается disable, но после корректирования поля, disable не исчезает, хотя должен. Какие у вас есть идеи на этот счет?

css javascript html валидация
Источник: Stack Overflow на русском

Ответы

▲ 0

У html forms нет атрибута disabled https://www.w3schools.com/tags/tag_form.asp

То есть форму отключить нельзя только элементы внутри формы.

inputs.ferEach(input => { input.disabled = true });
▲ 0

В случае, если валидация не проходит, запрещайте отправку через event.preventDefault(); Задизейблить всю форму нельзя - только кнопки и поля

▲ 0

поробуй такой тип для addEventListener:

firstDate.addEventListener("input", ... );