forms - validate radio button before calling data-target -

on website im making kind of multi step form. each question had 2 possible answers (radio buttons) each question bootstrap accordion element. (only 1 visible @ time)

when page loaded, first bootstrap accordion element open first question, each accordion element has next button, go the next accordion element. action of opening next data-toggle="collapse" data-target="#target"

now want validate if answer givin before going next question.

please me! stuck on days , cant find answers im looking for.

below code of 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> 

a lot of searching , posting on forums got answer, future people same issue, here solution.

first of deleted 'data-toggle="collapse' on every button. each radio group made new form unique id , each button added unique id can validate every group seperate.
after validated adds 'data-toggle="collapse'

below html , 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"); } });