0

Пытаюсь сделать форму отправки с шагами. 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>

3 ответа 3

0

вам валидация формы на уровне JS нужна... можно бить в бубен, можно плагин прикрутить з.ы. никто вас не избавит от необходимости валидировать данные. з.з.ы. и логика поведения хтмл это тоже JS...

1
  • я итак использую плагин валидации - jqueryvalidation.org В этом случае можно без громоздкой проверки, а всего лишь проверку на пустое\не пустое поле 4 апр 2018 в 14:20
0

Приходит в голову, идея с Ajax, если отправляешь данные на сервер, то там есть
2 функции. Я не особо разбирался в твоем коде, но ты думаю логику ты поймешь.
P.S не силен в JS , сорри если не помогло.

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

0

Вот такое простое решение нашлось:

$('.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.