Использование плагина проверки jQuery с табуретной навигацией

Question

У меня есть мастер навигации с вкладками, для которого первый раздел нужно проверить, прежде чем переходить к следующей вкладке. Валидация должна срабатывать, когда пользователь нажимает кнопку «Далее». Я не могу получить подтверждение, чтобы вызвать хотя:

<form id="target-group" novalidate="novalidate"> 
<div class="box"> 
    <div class='box-header-main'><h2><img src="assets/img/list.png" /> Target Group Information</h2></div> 
    <br /> 
    <div class='box'> 
     <div class='box-header-property'><h2><span data-bind="text:Name">New Target Group</span> | <i class='fa fa-file'></i></h2></div> 
     <br /> 
     <div class='row'> 
      <div id='flight-wizard'> 
       <div id='content' class='col-lg-12'> 
        <div class='col-lg-12'> 
         <div id='tabs'> 

          <ul> 

           <li id="targetgroup-info-tab"><a href='#tabs-1'><i class="fa fa-info-circle"></i>Target Group Info</a></li> 
           <li id="zone-tab"><a href='#tabs-2'><i class="fa fa-map-marker"></i>Zones</a></li> 
          </ul> 
          <div id='tabs-1'> 
           <div class='row'> 
            <div class='col-xs-6'> 
             <div class='form-group'> 
              Name<sup>*</sup> 
              <input id="selectError0" name="name" class='form-control col-xs-12' data-bind="value: asdf" placeholder='Enter Name ...' /> 
             </div> 
             <form class='form-horizontal'> 
              <div class='form-group'> 
               Product(s)<sup>*</sup> 
               <div class='controls' id='products'> 
                <select id='selectError3' class='form-control' data-bind="options:test, optionsText: 'Name', optionsValue : 'test', value: test, optionsCaption: 'Choose Product...'"></select> 
               </div> 
              </div> 

             </form> 
            </div> 
            <!--RIGHT PANE--> 
            <div class='col-xs-6'> 
             <div class='form-group'> 
              Platform<sup>*</sup> 
              <div class='controls'> 
               <select id="selectError2" class='form-control' data-bind="options:test, optionsText: 'Name', optionsValue: 'test', value : test, optionsCaption: 'Choose Platform...'"></select> 
              </div> 
             </div> 
             <form class='form-horizontal'> 
              <div class='form-group'> 
               AdTypes(s)<sup>*</sup> 
               <div class='controls' id='adtypes'> 
                <select multiple="" id='adtypesselect' class='form-control' data-rel="chosen" data-bind="options:test, optionsText: 'Name', optionsValue : 'test', selectedOptions: test, optionsCaption: 'test...'"></select> 
               </div> 
              </div> 
             </form> 
             <button id="btn_cancel_large" class='btn btn-large btn-primary btn-round'><i class='fa fa-ban' /></i> Cancel</button> 
             <button id="btn-next-large" class='btn btn-large btn-primary btn-round'>Next <i class='fa fa-arrow-circle-right'></i></button> 
            </div> 
            <!--end of right pane--> 

           </div> 
          </div> 

          <div id='tabs-2'> 
           <div class='row'> 
            <div class='col-lg-12'> 
             <div class='row'> 
              <div class='col-lg-12'> 
               <div id='zones_list' class='box-content'> 
                <div id='add-new-targetgroupzone' class='add-new'><i class='fa fa-plus-circle'></i><a href='/#/inventory/targeting/' onclick="return false;">Add Zone</a></div> 
                <table id="results" width="100%"> 
                 <thead> 
                  <tr> 
                   <th>Publisher</th> 
                   <th>Property</th> 
                   <th>Zone</th> 
                   <th>AdTypes</th> 
                   <th width='10%'>Quick&nbsp;Actions</th> 
                  </tr> 
                 </thead> 
                </table> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
           <br /> 
           <div class="btn_row"> 
            <button id="btn_cancel_large2" class='btn btn-large btn-primary btn-round'><i class='fa fa-ban' /></i> Cancel</button> 
            <button id="btn-submit-large" class='btn btn-large btn-primary btn-round'>Submit <i class='fa fa-arrow-circle-down'></i></button> 
           </div> 

          </div> 

         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</form> 
<form id="zones-form" style="display: none;" novalidate="novalidate" class="slideup-form"> 
    <div class="box"> 
     <div class="box-header-panel"> 
      <h2>Add Target Group Zone</h2> 
      <div class="box-icon" id="zones-form-close"> 
       <i class="fa fa-arrow-circle-down"></i> 
      </div> 
     </div> 
     <div class="box-content clearfix"> 

      <div class="box-content"> 
       <table id="zones-list" width="100%"> 
        <thead> 
         <tr> 
          <th>Publisher</th> 
          <th>Property</th> 
          <th>Zone</th> 
          <th>AdTypes</th> 
          <th width='10%'>Quick&nbsp;Actions</th> 
         </tr> 
        </thead> 
       </table> 
      </div> 
     </div> 
    </div> 
    </div> 
</form> 

JQuery:

$("#target-group").validate({ 
    rules: { 
     name: { 
      required: true 
     } 
    }, 
    messages: { 
     name: "Name required", 
    } 
}); 

$('#btn-next-large').click(function() { 
    if ($('#target-group').valid()) $tabs.tabs('select', $(this).attr("rel")); 
}); 

Answer 1

Если я правильно помню, что плагин проверки будет работать только на подчиненной формы. Таким образом, вам нужно сделать свою кнопку next в кнопку отправки, а затем переопределить нормальное поведение отправки, выполнив

$(form).submit(function() { 
    // ... code to make button click behave like your `next` button 
    return false; // this will prevent your form from submitting 
});