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 
});