Шаги заполнения формы с помощью bootstrap 3 и валидацией

$.ajax({ 
    //Default params 
    beforeSend: function(){ 
    //Тут что делаем пока данные еще не отправились 
    }, 
    success: function(data){ 
    //Тут валидируем данные и переключаем на следующую штуку 
    } 
    
});

$('.wizard a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
 
  var $target = $(e.target); 
 
  if ($target.parent().hasClass('disabled')) { 
    return false; 
  } 
}); 
 
$(".wizard .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.addClass('check'); 
  $active.next().removeClass('disabled'); 
  nextTab($active); 
 
}); 
 
$(".wizard .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(); 
}

.nav-tabs>.cart-nav__item.check>a{ 
  color:red !important; 
  font-weight: bold !important; 
}

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