[ANSWERED] javascript – Checkbox – one must be checked before continue

Question 1

Here is an answer to TWO of your questions

You should NEVER add an event handler in a function you may call more than once.

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
    <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>
  <div class="col checkboxgroup">
    <input type="checkbox" value="material" name="project_need" class="check_UN_Ziel form-check-input">
    <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>
  <div class="col checkboxgroup">
    <input type="checkbox" value="material" name="project_need" class="check_UN_Ziel form-check-input">
    <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>
</div>
<button type="button" onclick="nextPrev()">Test code</button>

Question 2

I have a wizzard-formular with many different tabs. One of them includes 10 checkboxes and at least one of them should be required / checked before continue the form. So i got this html code:

<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>

and I got the next and prev Button to go to the next tab.

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

The JS code is from w3school and can be found here.
Now I made a function where it alerts when the no checkbox is checked:

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

I call the function inside the function nextPrev(n). So if i click the next button it alerts be but the next tab will be opend. How can I stop the next tab from dispalying? example here.

Bollate

[ANSWERED] javascript – Checkbox – one must be checked before continue

By

Solution 1 :

Problem :

Comments

Comment posted by LearningEveryday

Comment posted by Dariun

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate