在我的网站上,我正在制作某种多步骤表格。每个问题都有 2 个可能的答案(单选按钮) 每个问题都是一个引导手风琴元素。(当时只有 1 个可见)
当页面加载时,第一个引导手风琴元素与第一个问题一起打开,每个手风琴元素都有一个下一步按钮,用于进入下一个手风琴元素。打开next的动作是data-toggle="collapse" data-target="#target"
现在我希望它在进入下一个问题之前验证是否给出了答案。
请帮我!坚持了几天,找不到我正在寻找的答案。
下面是我的多步表单的代码
<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>