Question

我创建了一个多步骤表单，并使用Form Validator

实现了简单的验证

如果目前的步骤形式未经过验证，我无法弄清楚如何防止用户进入下一步？（如果没有当前验证，用户必须无法继续下一步）

以下是代表我当前工作的代码段示例：

＆＃13;

$(document).ready(function () {
  
    //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

        var $target = $(e.target);
    
        if ($target.parent().hasClass('disabled')) {
            return false;
        }
    });

    $(".btn-primary").click(function (e) {

        var $active = $('.wizard .nav-wizard li.active');
        $active.next().removeClass('disabled');
        nextTab($active);

    });
});

function nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();
}





  $.validate({
    modules : 'location, date, security, file',
    onModulesLoaded : function() {
      $('#country').suggestCountry();
    }
  });

＆＃13;

body{
    margin: 20px auto;
}
ul.nav-wizard {
  background-color: #f1f1f1;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
ul.nav-wizard:before {
  position: absolute;
}
ul.nav-wizard:after {
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 138px;
  height: 47px;
  border-top: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
  z-index: 11;
  content: " ";
}
ul.nav-wizard li {
  position: relative;
  float: left;
  height: 46px;
  display: inline-block;
  text-align: center;
  padding: 0 20px 0 30px;
  margin: 0;
  font-size: 16px;
  line-height: 46px;
}
ul.nav-wizard li a {
  color: #428bca;
  padding: 0;
}
ul.nav-wizard li a:hover {
  background-color: transparent;
}
ul.nav-wizard li:before {
  position: absolute;
  display: block;
  border: 24px solid transparent;
  border-left: 16px solid #d4d4d4;
  border-right: 0;
  top: -1px;
  z-index: 10;
  content: '';
  right: -16px;
}
ul.nav-wizard li:after {
  position: absolute;
  display: block;
  border: 24px solid transparent;
  border-left: 16px solid #f1f1f1;
  border-right: 0;
  top: -1px;
  z-index: 10;
  content: '';
  right: -15px;
}
ul.nav-wizard li.active {
  color: #3a87ad;
  background: #dedede;
}
ul.nav-wizard li.active:after {
  border-left: 16px solid #dedede;
}
ul.nav-wizard li.active a,
ul.nav-wizard li.active a:active,
ul.nav-wizard li.active a:visited,
ul.nav-wizard li.active a:focus {
  color: #989898;
  background: #dedede;
}
ul.nav-wizard .active ~ li {
  color: #999999;
  background: #f9f9f9;
}
ul.nav-wizard .active ~ li:after {
  border-left: 16px solid #f9f9f9;
}
ul.nav-wizard .active ~ li a,
ul.nav-wizard .active ~ li a:active,
ul.nav-wizard .active ~ li a:visited,
ul.nav-wizard .active ~ li a:focus {
  color: #999999;
  background: #f9f9f9;
}
ul.nav-wizard.nav-wizard-backnav li:hover {
  color: #468847;
  background: #f6fbfd;
}
ul.nav-wizard.nav-wizard-backnav li:hover:after {
  border-left: 16px solid #f6fbfd;
}
ul.nav-wizard.nav-wizard-backnav li:hover a,
ul.nav-wizard.nav-wizard-backnav li:hover a:active,
ul.nav-wizard.nav-wizard-backnav li:hover a:visited,
ul.nav-wizard.nav-wizard-backnav li:hover a:focus {
  color: #468847;
  background: #f6fbfd;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li {
  color: #999999;
  background: #ededed;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li:after {
  border-left: 16px solid #ededed;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li a,
ul.nav-wizard.nav-wizard-backnav .active ~ li a:active,
ul.nav-wizard.nav-wizard-backnav .active ~ li a:visited,
ul.nav-wizard.nav-wizard-backnav .active ~ li a:focus {
  color: #999999;
  background: #ededed;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>


<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row">
		<section>
        <div class="wizard">
            
                <ul class="nav nav-wizard">

                    <li class="active">
                        <a href="#step1" data-toggle="tab">Billing Details</a>
                    </li>

                    <li class="disabled">
                        <a href="#step2" data-toggle="tab">Delivery Method</a>
                    </li>

                    <li class="disabled">
                        <a href="#step3" data-toggle="tab">Payment Method</a>
                    </li>
                    
                     <li class="disabled">
                        <a href="#step4" data-toggle="tab">Confirm Order</a>
                    </li>
                </ul>
           

            <form>
                <div class="tab-content">
                    <div class="tab-pane active" id="step1">
                        <h3>Step 1</h3>
                       <input name="email" placeholder="email" data-validation="email">
                       
                       <input name="user" data-validation="required" placeholder="Username">
     
                        <ul class="list-inline pull-right">
                            <li><button type="button" class="btn btn-primary">Continue</button></li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="step2">
                        <h3>Step 2</h3>
                        <p>This is step 2</p>
                        <ul class="list-inline pull-right">
                           <li><button type="button" class="btn btn-primary">Continue</button></li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="step3">
                        <h3>Step 3</h3>
                        <p>This is step 3</p>
                        <ul class="list-inline pull-right">
                            <li><button type="button" class="btn btn-primary">Continue</button></li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="step4">
                        <h3>Complete</h3>
                        <p>You have successfully completed all steps.</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </div>
    </section>
   </div>
</div>

＆＃13;

Answer 1

您需要添加

if ($('form').isValid())

代码：

$(".btn-primary").click(function (e) {
    if ($('form').isValid()) {
        var $active = $('.wizard .nav-wizard li.active');
        $active.next().removeClass('disabled');
        nextTab($active);
    }
});

如果表单未经过验证，如何阻止用户进入下一步

1 个答案: