데이터를 호출하기 전에 라디오 버튼의 유효성을 확인하십시오.

Question

내 웹 사이트에서 일종의 멀티 스텝 형식을 만들고 있습니다. 각 질문에는 2 개의 가능한 대답 (라디오 버튼)이 있습니다 각 질문은 부트 스트랩 아코디언 요소입니다. (한 번에 한 번만 볼 수 있음)

페이지가로드되면 첫 번째 부트 스트랩 아코디언 요소가 첫 번째 질문 인 의 각 아코디언 요소에 다음 아코디언 요소로 이동하여 열립니다. 다음을 여는 동작은 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> 

Answer 1

같은 문제와 미래의 사람들을 위해, 여기 내 솔루션 그래서 내가, 내 대답을 얻었다 포럼 검색 및 게시의 많은의 코드입니다.

먼저 모든 버튼에서 'data-toggle = "collapse"를 삭제했습니다. 각 라디오 그룹마다 고유 한 ID로 새 양식을 만들었고 각 버튼마다 고유 한 ID를 추가하여 모든 그룹의 유효성을 검사 할 수있었습니다. . 그 검증 후 별도
는 '는 데이터 토글 = "붕괴"1 라디오 버튼 그룹의 HTML 및 스크립트 아래

추가

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

브이 ALIDATION :

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

는 데이터 토글을 추가 = "붕괴"

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

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