Флажок - перед продолжением

Question

У меня есть wizzard-формула с множеством разных вкладок. Один из них включает в себя 10 флажков, и по крайней мере один из них должен быть обязательным / проверен, прежде чем продолжить форму. Итак, я получил html код:

<div class="row form-group" id="tab_UN_Ziele">
  <div class="col checkboxgroup"> <input type="checkbox" value="material"  name="project_need" class="check_UN_Ziel form-check-input" onclick="//checkboxChecked()"> <label for="project_need_material_1"> <div class=" card border-0"> <img class="icon-image checkbox_images" src="SDGIcons/01.png" style="width:150px; border-radius: 10px;" /></div></label></div>
  ... this div 10 times
</div>

и получил следующую и предыдущую кнопку для go до следующей вкладки.

<button type="button" id="prevBtn" onclick="nextPrev(-1)">Zurück</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>

Код JS от w3school и можно найти здесь . Теперь я сделал функцию, в которой она оповещает, когда флажок no установлен:

let errorMessage = (tab_indicator, alert_text) => {
  if (currentTab == tab_indicator) {
    $(document).ready(function () {
      $('#nextBtn').click(function () {
        checked = $("input[type=checkbox]:checked").length;

        if (!checked) {
          alert(alert_text);
          return curretTab(2);
        }
      });
    });
  }
}

Я вызываю функцию внутри function nextPrev(n). Поэтому, если я нажму следующую кнопку, появится предупреждение, но следующая вкладка будет открыта. Как я могу остановить отображение следующей вкладки? пример здесь .

Answer 1

Вот ответ на ДВА ваших вопроса

НИКОГДА не добавляйте обработчик событий в функцию, которую вы можете вызывать более одного раза.

window.addEventListener("load", () => {
  document.getElementById("tab_UN_Ziele").addEventListener("click", e => {
    const tgt = e.target;
    if (tgt.classList.contains("check_UN_Ziel")) {
      tgt.closest(".checkboxgroup").querySelector(".card").style.border = tgt.checked ? '5px solid red' : "none"
    }
  })
})

currentTab = 2

let errorMessage = (tab_indicator, alert_text) => {
  if (currentTab == tab_indicator) {
    const checked = $("input[type=checkbox]:checked").length>0;
    if (!checked) {
      alert(alert_text);
      return false; // error found
    }
  }
  console.log("ok")
  return true;
};

function nextPrev(n) {
  if (!errorMessage(2,"Bitte wählen sie mindestens ein UN-Ziel aus.")) {
    console.log("error");
    // showTab(currentTab); 
  }
}  

.card {
  border: 1px solid black;
}