Пытаюсь сделать форму отправки с шагами. Bootstrap 3. Табы. Форма. Кнопки вперед\назад (переключение между табами).
Смысл в том, что если во вкладке не заполнена форма (или с ошибкой), то переключаться на следующую вкладку нельзя.
Но у меня все равно происходит переключение. Как можно задать условие чтобы переключалось вперед если все в порядке, все поля заполнены? Да и еще если в 3-ей вкладке уже не кнопка дальше, а submit можно ли задать чтобы при клике отправлялась форма и происходило переключение на 4-вкладку?
Код:
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".cart-next").click(function (e) {
var form = $(this).closest('.cart-item');
if (form.validate().form() === false) return false;
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".cart-back").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<div class="container wizard">
<ul class="cart-nav nav nav-tabs">
<li class="cart-nav__item check active">
<a href="#cart-1" data-toggle="tab">
<i class="fa fa-check" aria-hidden="true"></i>
Старт
</a>
</li>
<li class="cart-nav__item disabled ">
<a href="#cart-2" data-toggle="tab">
<i class="fa fa-check" aria-hidden="true"></i>
Шаг 2
</a>
</li>
<li class="cart-nav__item disabled">
<a href="#cart-3" data-toggle="tab">
<i class="fa fa-check" aria-hidden="true"></i>
Шаг 3
</a>
</li>
<li class="cart-nav__item disabled">
<a href="#cart-4" data-toggle="tab">
<i class="fa fa-check" aria-hidden="true"></i>
Готово
</a>
</li>
</ul>
<form class="form">
<div class="cart-content tab-content">
<div id="cart-1" class="cart-item tab-pane fade in active">
<div class="cart-body">
<h1>Стартуем!!!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus amet doloribus culpa facilis, eaque aperiam neque alias sapiente possimus explicabo!
</p>
</div>
<div class="cart-bottom">
<div class="row">
<div class="col-xs-6">
<a href="google.com" target="_blank" class="btn btn-primary cart-back-to">
Вернуться на главную
</a>
</div>
<div class="col-xs-6 text-right">
<a href="#" class="btn btn-success cart-next">
Вперед
</a>
</div>
</div>
</div>
</div>
<div id="cart-2" class="cart-item tab-pane fade">
<div class="cart-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="f-1"><span>Поле 1</span></label>
<input type="text" name="name-1" class="form-control" id="f-1" placeholder="Поле 1 ..." data-rule-required="true" data-msg="Ошибка при заполнении">
</div>
</div>
<div class="col-md-6">
<div class="form-group requare">
<label class="form-label" for="f-2"><span>Поле 2</span></label>
<input type="text" name="name-2" class="form-control" id="f-2" placeholder="Поле 2 ..." data-rule-required="true" data-msg="Ошибка при заполнении">
</div>
</div>
</div>
</div>
<div class="cart-bottom">
<div class="row">
<div class="col-xs-6">
<a href="#" class="btn btn-primary cart-back">
Назад
</a>
</div>
<div class="col-xs-6 text-right">
<a href="#" class="btn btn-success cart-next">
Вперед
</a>
</div>
</div>
</div>
</div>
<div id="cart-3" class="cart-item tab-pane fade">
<div class="cart-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="f-3"><span>Поле 3</span></label>
<input type="text" name="name-3" class="form-control" id="f-3" placeholder="Поле 3 ..." data-rule-required="true" data-msg="Ошибка при заполнении">
</div>
</div>
<div class="col-md-6">
<div class="form-group requare">
<label class="form-label" for="f-4"><span>Поле 4</span></label>
<input type="text" name="name-4" class="form-control" id="f-4" placeholder="Поле 4 ..." data-rule-required="true" data-msg="Ошибка при заполнении">
</div>
</div>
</div>
</div>
<div class="cart-bottom">
<div class="row">
<div class="col-xs-6">
<a href="#" class="btn btn-primary cart-back">
Назад
</a>
</div>
<div class="col-xs-6 text-right">
<button type="submit" class="btn btn-success cart-next">
Отправить
</button>
</div>
</div>
</div>
</div>
<div id="cart-4" class="cart-item tab-pane fade">
<h2>Поздравляем!!!</h2>
</div>
</div>
</form>
</div>