0

我已经使用插件从演示链接Jquery Form Validator验证我的表单。现在我用不同的标签分隔表格。单击某个选项卡的“下一步”按钮时，如何在某些选项卡上实现验证？我应该对插件方法进行哪些自定义？

这是片段，

$("ul.kyc-tab-list li a").click(function() {
  $("ul.kyc-tab-list li a").removeClass("active");
  $(this).addClass("active");
  /* Do this instead of multiple listeners */
  $(".kyc-tab-content").hide();
  $($(this).attr('class').split(' ').find(function(e) {
    return e.startsWith('tab-btn');
  }).replace('tab-btn', '#tab')).show();
});

// active tab load initially
$(".tab.active").trigger('click');


$('#btnNext').click(function() {
  var currentTab = $(".tab.active");
  var newTab = currentTab.closest('li').next().find('a');
  if (newTab.length === 0) {
    newTab = $(".tab").first();
  }
  newTab.trigger('click');
});

$('#btnPrevious').click(function() {
  var currentTab = $(".tab.active");
  var newTab = currentTab.closest('li').prev().find('a');
  if (newTab.length === 0) {
    newTab = $(".tab").last();
  }
  newTab.trigger('click');
});

var isAllvalid = true;

  $.validate({

    form: '#registration',
    modules: 'date, security, file, logic',
    validateOnBlur: true,
    showHelpOnFocus: true,
    addSuggestions: true,
    onModulesLoaded: function () {
        console.log('All modules loaded!');
    },
    onSuccess: function ($form) {
        //form.submit();
        //event.preventDefault();

        if (isAllvalid == true) {

            $.ajax({
                url: '@Url.Action("GenerateReport", "StaticPage")',
                type: 'POST',
                data: $('#registration').serialize(),
                success: function (data) {

                    if (data.fileName != "") {
                        window.location = '/StaticPage/Download?file=' + data.fileName;
                    }
                }
            });

        }

        return false;
    },
    onError: function () {
        //alert("Error")
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

<div>
  <section>
    <div class="kyc-tab-wrapper">
      <ul class="kyc-tab-list">
        <li>
          <a href="javascript:void(0);" class="tab active tab-btn1"><span>01</span>Customer</a>
        </li>
        <li>
          <a href="javascript:void(0);" class="tab tab-btn2"><span>02</span>Contact / Promotors</a>
        </li>
        <li>
          <a href="javascript:void(0);" class="tab tab-btn3"><span>03</span>Bank / Business</a>
        </li>
        <li>
          <a href="javascript:void(0);" class="tab tab-btn4"><span>04</span>Other</a>
        </li>
        <li>
          <a href="javascript:void(0);" class="tab tab-btn5"><span>05</span>Finish</a>
        </li>
      </ul>
      <div class="kyc-tab-content" id="tab1">tab 1</div>
      <div class="kyc-tab-content" id="tab2">tab 2</div>
      <div class="kyc-tab-content" id="tab3">tab 3</div>
      <div class="kyc-tab-content" id="tab4">tab 4</div>
      <div class="kyc-tab-content" id="tab5">tab 5</div>
      <div class="kyc-tab-form-btn-wrap">
        <button id="btnPrevious">  Previous</button>
        <button id="btnNext">Next </button>
      </div>
    </div>
  </section>
</div>

我应该在 $.validate({}) 方法中实现什么自定义逻辑？

4

0 回答 0