jQuery - проверка формы с вкладками вне формы

Question

Я использую FormValidation plugin for jQuery - и я пытаюсь создать мастер формы с помощью bootstrap tabs. Это мой код до сих пор:

<form class="center-form" id="installationForm" method="post"> 
    <!-- Tab panes --> 
    <div class="tab-content"> 
     <! -- #tab1 --> 
     <div role="tabpanel" class="tab-pane active" id="details"> 
      <div class="form-group"> 
       <label>Title</label> 
       <input type="text" class="ad-title form-control" name="title" value="" placeholder="Enter your advertisement title..."> 
      </div> 

     </div> 
     <! -- #tab1 end --> 
     <! -- #tab2 --> 
     <div role="tabpanel" class="tab-pane active" id="audience"> 
      <div class="form-group"> 
       <label>Description</label> 
       <input type="text" class="ad-title form-control" name="description" value="" placeholder="Enter your advertisement title..."> 
      </div> 
     </div> 
     <! -- #tab2 end --> 

    </div> 
    <ul class="pager wizard"> 
     <li class="previous"><a href="javascript:void(0)">Previous</a> 

     </li> 
     <li class="next"><a href="javascript:void(0);">Next</a> 

     </li> 
    </ul> 
</form> 

<ul class="nav nav-tabs ad-creation" id="progress"> 
     <li class="active"> <a href="#details" data-toggle="tab" class="button btn-round">tab1</a></li> 
     <li> <a href="#audience" data-toggle="tab" class="button btn-round">tab2</a></li> 

И мой JavaScript:

$(document).ready(function() { 
    $('#installationForm') 
     .formValidation({ 
      framework: 'bootstrap', 
      icon: { 
       valid: 'glyphicon glyphicon-ok', 
       invalid: 'glyphicon glyphicon-remove', 
       validating: 'glyphicon glyphicon-refresh' 
      }, 
      // This option will not ignore invisible fields which belong to inactive panels 
      excluded: ':disabled', 
      fields: { 
       name: { 
        validators: { 
         notEmpty: { 
          message: 'The site name is required' 
         } 
        } 
       }, 
       url: { 
        validators: { 
         notEmpty: { 
          message: 'The URL is required' 
         }, 
         uri: { 
          message: 'The URL is not valid' 
         } 
        } 
       } 
      } 
     }) 
     .bootstrapWizard({ 
      tabClass: 'nav nav-pills', 
      onTabClick: function(tab, navigation, index) { 
       return validateTab(index); 
      }, 
      onNext: function(tab, navigation, index) { 
       var numTabs = $('#progress').find('.tab-pane').length, 
        isValidTab = validateTab(index - 1); 
       if (!isValidTab) { 
        return false; 
       } 

       if (index === numTabs) { 
        // We are at the last tab 

       } 

       return true; 
      }, 
      onPrevious: function(tab, navigation, index) { 
       return validateTab(index + 1); 
      }, 
      onTabShow: function(tab, navigation, index) { 
       // Update the label of Next button when we are at the last tab 
       var numTabs = $('#progress').find('.tab-pane').length; 
       $('#installationForm') 
        .find('.next') 
         .removeClass('disabled') // Enable the Next button 
         .find('a') 
         .html(index === numTabs - 1 ? 'Install' : 'Next'); 

      } 
     }); 

    function validateTab(index) { 
     var fv = $('#installationForm').data('formValidation'), // FormValidation instance 
      // The current tab 
      $tab = $('#installationForm').find('.tab-pane').eq(index); 

     // Validate the container 
     fv.validateContainer($tab); 

     var isValidStep = fv.isValidContainer($tab); 
     if (isValidStep === false || isValidStep === null) { 
      // Do not jump to the target tab 
      return false; 
     } 

     return true; 
    } 
}); 

Теперь - проверка работы IF я двигаю #progress внутри #installionForm тега формы.

Мой вопрос, как я могу получить его для проверки полей формы внутри вкладок, и имеют #progress переехал из #installationForm?

Answer 1

Чтобы разрешить проверку, когда поля скрыты, мы должны переопределить игнорирование по умолчанию во время скрытия.

Это должно работать для вас:

кода

$('#myform').validate({ 
    ignore: [], 
    // etc etc other validation options 
}); 

Проверки смотрит на коде и в основном создает массив полей игнорировать, это перекрывает с пустым массивом, то есть проверить все.