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

Question

[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'));
	}
}

Прописал вот такой код проверки выбрана ли одна из радиокнопок в форме, если нет - форма не отправляется. Все работает, но вот, когда я пытаюсь прописать адаптив для блока с формой, изменяя свойства классов на определенной ширине экрана, то форма отправляется при условии, что кнопка не выбрарана. + ко всему изменяются свойства классов как родительских блоков формы, так и дочерних, но не элементов, которые отвечают за заполнение и отправку формы. Пробовал комбинировать и оставлять только какой-то один измененный класс - тоже самое, а вот если ни один класс не изменен - то форма не отправляется и скрипт срабатывает как надо

Answer 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'));
  }
}

Comments

[Kardamon_mchl]

Я немного неправильно сформулировал вопрос и изменил его. Форма на любой ширине не отправляется при том условии, если на этой ширине свойства классов не меняются, если же хоть один класс изменен, то скрипт уже не срабатывает. При том, что классы изменяются и родительские и дочерние, а сами свойства типа ширины/отступов/ориентации флекс элемента.

[Kardamon_mchl]

Сам разобрался. У меня хтмл внутри кнопки отправки формы была еще ссылка вставлена, которая перезагружала страницу...