@Kardamon_mchl

Как отменить отправку формы если та не прошла валидацию при адаптиве?

form.onsubmit = function () {

	let inputRadio = document.querySelector('input[name="payment"]:checked'),
		radios = document.querySelectorAll('.order__form-step.active .radio__fake');
	if (!inputRadio) {
		radios.forEach(radio => radio.classList.add('invalid'));
		return false;
	} else {
		radios.forEach(radio => radio.classList.remove('invalid'));
	}
}


Прописал вот такой код проверки выбрана ли одна из радиокнопок в форме, если нет - форма не отправляется. Все работает, но вот, когда я пытаюсь прописать адаптив для блока с формой, изменяя свойства классов на определенной ширине экрана, то форма отправляется при условии, что кнопка не выбрарана. + ко всему изменяются свойства классов как родительских блоков формы, так и дочерних, но не элементов, которые отвечают за заполнение и отправку формы. Пробовал комбинировать и оставлять только какой-то один измененный класс - тоже самое, а вот если ни один класс не изменен - то форма не отправляется и скрипт срабатывает как надо
  • Вопрос задан
  • 80 просмотров
Решения вопроса 1
@Soft_touch_plastic
Для того, чтобы запретить отправку, требуется получить объект ивента, и запретить его продолжение. Можно так:
form.onsubmit = function (event) {
  let inputRadio = document.querySelector('input[name="payment"]:checked'),
    radios = document.querySelectorAll('.order__form-step.active .radio__fake');
  if (!inputRadio) {
    radios.forEach(radio => radio.classList.add('invalid'));

    event.preventDefault() //теперь форма не отправится

    return false;
  } else {
    radios.forEach(radio => radio.classList.remove('invalid'));
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы