Не меняется состояние disable у кнопки
У меня есть валидация формы, и я хочу вешать на кнопку отправки формы 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 не исчезает, хотя должен. Какие у вас есть идеи на этот счет?
Ответы (3 шт):
У html forms нет атрибута disabled https://www.w3schools.com/tags/tag_form.asp
То есть форму отключить нельзя только элементы внутри формы.
inputs.ferEach(input => { input.disabled = true });
В случае, если валидация не проходит, запрещайте отправку через event.preventDefault();
Задизейблить всю форму нельзя - только кнопки и поля
поробуй такой тип для addEventListener:
firstDate.addEventListener("input", ... );