Проверка в BootstrapWizard

Question

Проверка в BootstrapWizard

У меня здесь есть вкладка для player_name а также level и следующая кнопка.

<div id="tabs_here">
<div class="tab-content">
<!-- THIS IS THE FIRST TAB -->
<div id="demo-cls-tab1" class="tab-pane">
<fieldset>
<input type="text" id="player_name" class="form-control" />
</fieldset>
</di>

<!-- THIS IS THE SECOND TAB -->
<div id="demo-cls-tab2" class="tab-pane">
<fieldset>
<select class="form-control" id="level">
<option>---- Select Level ----</option>
<option>Level 1: Easy</option>
<option>Level 2: Meduim</option>
<option>Level 3: Hard</option>
<option>Level 4: Legendary</option>
</select>
</fieldset>
</div>

<!-- AND SO ON -->
</div>
</div>

<button class="next">NEXT</button>

Следующая кнопка предназначена для изменения следующей вкладки.

$('#tabs_here').bootstrapWizard({
tabClass: 'wz-classic',
nextSelector: '.next',
previousSelector: '.previous',
onTabClick: function(tab, navigation, index) {
return false;
},
onInit: function() {
// some functions here
},
onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $percent = ($current / $total) * 100;
var wdt = 100 / $total;
var lft = wdt * index;
$('#tabs_here').find('.progress-bar').css({ width: $percent + '%' });

// If it's the last tab then hide the last button and show the finish instead
if ($current >= $total) {
$('#tabs_here').find('.next').hide();
$('#tabs_here').find('.finish').show();
$('#tabs_here').find('.finish').prop('disabled', false);
} else {
$('#tabs_here').find('.next').show();
$('#tabs_here').find('.finish').hide().prop('disabled', true);
}
}
});

Как я могу реализовать валидацию, когда вход на вкладке пуст, следующая кнопка не должна работать.
Я думаю о чем-то вроде этого,

if(index==0) {
var player_name = $("#player_name");

if(player_name.val()!="") {
// proceed to next tab when next is clicked
}
else {
player_name.css({'border-color':'red'});
// DO NOT proceed to next tab
}
}
else if(index==1) {
var level = $("#level");

if(level.val()!="") {
// proceed to next tab
}
else {
level.css({'border-color':'red'});
// DO NOT proceed to next tab
}
}

Где и как я могу это реализовать?

0

html jquery php twitter-bootstrap-wizard validation

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Решение:

Я сделал другой подход в поиске решения, и наткнулся на это ссылка на сайт

Я просто должен добавить, onClick функция в пределах bootstrap wizard и вставьте проверку в.

onClick: function(tab, navigation, index) {
if(index==0) {
var player_name = $("#player_name");

if(player_name.val()!="") {
// proceed to next tab when next is clicked
return true;
}
else {
player_name.css({'border-color':'red'});
// DO NOT proceed to next tab
return false;
}
}
else if(index==1) {
var level = $("#level");

if(level.val()!="") {
// proceed to next tab
return true;
}
else {
level.css({'border-color':'red'});
// DO NOT proceed to next tab
return false;
}
}
}

и должен return true перейти к следующей вкладке и return false оставаться на вкладке. Надеюсь, это поможет будущим читателям.

0