Question

在我的网站上制作某种多步形式。每个问题都有2个可能的答案（单选按钮）每个问题都是一个bootstrap手风琴元素。（当时只有1个可见）

加载页面时，第一个引导手风琴元素打开，第一个问题，每个手风琴元素都有一个下一个按钮，以便进入下一个手风琴元素。打开下一个的动作是数据切换=＆＃34;崩溃＆＃34;数据目标=＆＃34;＃目标＆＃34;

现在我希望它在回到下一个问题之前验证答案是否正常。

请帮帮我！坚持这几天，无法找到我想要的答案。

以下是我的多步表单的代码

<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

在论坛上进行了大量的搜索和发布，我得到了答案，所以对于同样问题的未来人来说，这是我的解决方案。

首先我删除了＆＃39; data-toggle =＆＃34; collapse＆＃39;在每个按钮上。对于每个广播组，我使用他的唯一ID创建了一个新表单，并为每个按钮添加了一个唯一的ID，以便我可以对每个组进行单独验证。
在经过验证后，它会添加＆＃39; data-toggle =＆＃34; collapse＆＃39;

在1个单选按钮组的html和javascript下面

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>

验证：

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

添加数据切换=＆＃34;崩溃＆＃34;

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

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

在调用data-target之前验证单选按钮

1 个答案: