ブートストラップウィザードコントロールを使用するが、タブで検証が失敗したときに別のタブに移動しないようにするには

Question

私はhte Bootstrapウィザードを使用しています。ユーザーは、次のまたは前のボタンまたは上記のタブをクリックして、ウィザードの別のページに切り替えることができます。 ウィザードの1ページで、ある数値が別の数値よりも大きいかどうかを確認する必要があります。そうでない場合、検証は失敗します。次のボタンを押すと次のページに移動しません。この問題は、ユーザーがタブを後のタブにプッシュし、ウィザードでウィザードの新しいページに移動するときに発生します。

のように私のjavascriptのHTMLコードを探します：私は誰かとのページの後のページに移動できるように防ごうとするonTabClickとonTabShowイベントを使用してみましたが

@* Javascript code for the wizard *@ 
 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      $('#rootwizard').bootstrapWizard({ 
 
       onNext: function (tab, navigation, index) { 
 

 
        if(WizardValidation(index) == false) 
 
        { 
 
         return false; 
 
        } 
 

 
       }, 
 

 
       onTabClick: function(tab, navigation, index) 
 
       { 
 
        if (WizardValidation(tab[0].getAttribute('data-index')) == false) { 
 
         return false; 
 
        } 
 
       }, 
 

 
       onTabShow: function (tab, navigation, index) { 
 

 
        if (WizardValidation(tab[0].getAttribute('data-index')) == false) { 
 
         return false; 
 
        } 
 

 
        var $total = navigation.find('li').length; 
 
        var $current = index + 1; 
 
        var $percent = ($current/$total) * 100; 
 
        $('#rootwizard').find('.progress-bar').css({ width: $percent + '%' }); 
 
       } 
 
      }); 
 
      window.prettyPrint && prettyPrint() 
 
     }); 
 

 

 
     function WizardValidation(gotoIndex) 
 
     { 
 
      // Validation for various parts in the wizard 
 
      if (gotoIndex > 2) { 
 
       var oDaysMin = document.getElementById('OobeDaysMin').value 
 

 
       if (oDaysMin.length == 0) { 
 
        alert('You must enter a valid integer value'); 
 
        document.getElementById('OobeDaysMin').focus(); 
 
        return false; 
 
       } 
 

 
       var oDaysMax = document.getElementById('OobeDaysMax').value 
 

 
       if (oDaysMax.length == 0) { 
 
        alert('You must enter a valid integer value'); 
 
        document.getElementById('OobeDaysMax').focus(); 
 
        return false; 
 
       } 
 

 
       if ((parseInt(oDaysMax, 10) < parseInt(oDaysMin, 10))) { 
 
        alert('OobeDaysMax must be equal or greater than OobeDaysMin'); 
 
        document.getElementById('OobeDaysMax').focus(); 
 
        return false; 
 
       } 
 
      } 
 
     }

  <section id="wizard"> 
 
       <div id="rootwizard"> 
 

 
        <div class="navbar"> 
 
         <div class="navbar-inner"> 
 
          <div class="container"> 
 
           <ul> 
 
            <li id="wiz0" data-index="0"><a href="#tab1" data-toggle="tab">Name</a></li> 
 
            <li id="wiz1" data-index="1"><a href="#tab2" data-toggle="tab">Questions/Layout</a></li> 
 
            <li id="wiz2" data-index="2"><a href="#tab3" data-toggle="tab">Configuration</a></li> 
 
            <li id="wiz3" data-index="3"><a href="#tab4" data-toggle="tab">Assests/Themes</a></li> 
 
            <li id="wiz4" data-index="4"><a href="#tab5" data-toggle="tab">Quota Mgmt</a></li> 
 
            <li id="wiz5" data-index="5"><a href="#tab6" data-toggle="tab">Go Live</a></li> 
 
           </ul> 
 
          </div> 
 
         </div> 
 
        </div>

検証エラーです。 私はこれをどのようにすることができますか？

ありがとうございました。

Answer 1

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    var target = $(e.target).attr("href"); 
    console.log(target); 
    if (target == "#hesapbilgileri") { 
     if ($('#anlasmakabulcheck').is(':checked')) { 
      $('.test .wz-steps a[href="#first"]').tab('show'); 
     } 
     else 
      $('.test .wz-steps a[href="#second"]').tab('show'); 
    } 
});