validate radio button before calling data-target

Question

on my website im making some kind of multi step form. Each question had 2 possible answers (radio buttons) Each question is an a bootstrap accordion element. (only 1 visible at the time)

When the page is loaded, the first bootstrap accordion element is open with the first question, each accordion element has a next button, to go the the next accordion element. The action of opening the next is data-toggle="collapse" data-target="#target"

Now i want it to validate if an answer is givin before going to the next question.

Please help me! Stuck on this for days and cant find the answers im looking for.

Below is the code of my multistep form

<form>
<div class="testTitel 1 active">Gemak</div>
<div id="demo" class="collapse in">

<input type="radio" name="group1" value="1" class="radioStyle"> Ik wil af van de administratie die hoort bij werkgeven. <br>
<input type="radio" name="group1" value="2" class="radioStyle"> De administratie rondom mijn personeelszaken kan ik prima zelf. <br>

<button type="button" class="btn nextbtn 1" data-toggle="collapse" data-target="#demo,#demo2">
  Volgende
</button>
</div>
<div class="testTitel 2">Flexibiliteit</div>
<div id="demo2" class="collapse">

<input type="radio" name="group2" value="1" class="radioStyle"> Ik zoek meer flexibiliteit om mijn personeel in te kunnen zetten. <br>
<input type="radio" name="group2" value="2" class="radioStyle"> De contractsoorten die ik zelf aan kan bieden, geven mij voldoende speelruimte. <br>

<button type="button" class="btn backbtn 2" data-toggle="collapse" data-target="#demo,#demo2">
  Terug
</button>
<button type="button" class="btn nextbtn 2" data-toggle="collapse" data-target="#demo2,#demo3">
  Volgende
</button>
</div>
<div class="testTitel 3">Risico</div>
<div id="demo3" class="collapse">

<input type="radio" name="group3" value="2" class="radioStyle"> Een medewerker die ziek wordt zal in de toekomst geen negatief effect hebben op mijn bedrijf. <br>
<input type="radio" name="group3" value="1" class="radioStyle"> Ik heb geen idee wat een zieke medewerker zou kunnen kosten.. <br>

<button type="button" class="btn backbtn 3" data-toggle="collapse" data-target="#demo2,#demo3">
  Terug
</button>
<button type="button" class="btn nextbtn 3" data-toggle="collapse" data-target="#demo3,#demo4">
  Volgende
</button>
</div>
<div class="testTitel 4">Wetgeving</div>
<div id="demo4" class="collapse">

<input type="radio" name="group4" value="2" class="radioStyle"> Ik ben helemaal op de hoogte van alle verandering in het arbeidsrecht en weet zeker dat ik dit goed geregeld heb. <br>
<input type="radio" name="group4" value="1" class="radioStyle"> Alle veranderingen zijn lastig bij te houden en door te voeren in mijn personeelsbeleid. <br>

<button type="button" class="btn backbtn 4" data-toggle="collapse" data-target="#demo3,#demo4">
  Terug
</button>
<button type="button" class="btn nextbtn 4" data-toggle="collapse" data-target="#demo4,#demo5">
  Volgende
</button>
</div>
<div class="testTitel 5">Personeelskosten</div>
<div id="demo5" class="collapse">

<input type="radio" name="group5" value="1" class="radioStyle"> Ik wil meer inzicht in mijn totale personeelskosten. <br>
<input type="radio" name="group5" value="2" class="radioStyle"> Ik weet precies wat mijn personeelskosten zijn en kom nooit voor verrassingen te staan. <br>

<button type="button" class="btn donebtn 5" data-toggle="collapse" data-target="#demo5">
  Bekijk advies
</button>
</div>
</form>

Answer 1

A lot of searching and posting on forums i got my answer, so for future people with the same issue, here is my solution.

first of all i deleted 'data-toggle="collapse' on every button. For each radio group i made a new form with his unique ID and for each button i added a unique ID so i can validate every group seperate.
after its validated its adds 'data-toggle="collapse'

below the html and javascript of 1 radio button group

THE HTML:

<div class="testTitel 1 active">Gemak</div>
<div id="demo" class="collapse in">
<form action="" method="post" id="form1">
<input type="radio" name="group1" value="1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<input type="radio" name="group1" value="2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<label for="group1" class="error"> </label>
<button type="button" id="knop1" class="btn btn-danger nextbtn 1" data-target="#demo,#demo2">
  NEXT
</button></form></div>

THE VALIDATION:

$( "#form1" ).validate({
  rules: {
    group1: {
      required: true
    }
  }
});

ADDING data-toggle="collapse"

var form = $( "#form1" );
$('#knop1').click(function() {
$("#form1").valid();

if(form.valid() == true){
$(".btn.1").attr("data-toggle", "collapse");
}
});