I'm using a Bootstrap tab to display the Survey Question and Answers (either Checkbox list or Radio button list). I need to validate that in each tab (if it is Active at that moment ) at least one Radio / Checkbox should be selected. How can I achieve this?
My DOM looks like this
<div class="tab-content">
<div role="tab" class="tab-pane active" id="1">
<div class="considerable">
... Radio button list goes here
</div>
</div>
<div role="tab" class="tab-pane" id="2">
<div class="considerable">
... Checkbox list goes here
</div>
</div>
</div>
<div id="divCalculatorControl">
<a href="#" id="aSwitchToBack" style="">Back</a>
<a href="#" id="aSwitchToNext">Next</a>
</div>
On click of anchor with id "aSwitchToNext" I need to validate the input selection.
I tried as below, but it's working for non-active tabs also.
if ($('div.active > .considerable > input:checked').length) {
// Continue
}
else{
alert("Please select an answer");
}
Aucun commentaire:
Enregistrer un commentaire