如何以选项卡形式将数据发送到服务器

Question

嗨，我在引导程序中设计了带有两组表单字段的选项卡，第一组表单字段是一个 div 中的人员数据表单字段，第二组表单字段是另一个 div 中的地址数据表单字段 如果用户单击下一步按钮，如何避免填写第二组表单字段而不填写第一个选项卡中的第一组表单字段，它应该使用引导验证进行验证

小提琴：https://jsfiddle.net/Lpo89f88/1/

<!-- language: lang-html -->


<div class="container">
        <div class="row">
            <div class="col-md-6">
                <!-- Nav tabs -->
                <div class="card">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#home"
                            aria-controls="home" role="tab" data-toggle="tab">Person Data</a></li>
                        <li role="presentation"><a href="#profile"
                            aria-controls="profile" role="tab" data-toggle="tab">Address Data</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <div class="form-group">
                                PersonFirstName <input type="text" class="form-control"
                                    name="PersonFirstName">
                            </div>
                            <div class="form-group">
                                PersonLastName <input type="text" class="form-control"
                                    name="PersonLastName">
                            </div>
                            <button type="submit" class="btn btn-default">Next</button>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">
                            <div class="form-group">
                                Address 1 <input type="text" class="form-control" name="addr1">
                            </div>
                            <div class="form-group">
                                Address 2 <input type="text" class="form-control" name="addr2">
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 

Answer 1

验证不是很完整，这里是在进入新选项卡之前验证第一个选项卡的 sn-p。代码用 cmets 记录。希望这会有所帮助。

var form = document.forms[0]; //reading the form from dom
function isFirstFormValid(){
  return form.PersonFirstName.value !== "" && form.PersonLastName.value !== "";
  //you can write more validation rules here
}
$("#next-submit").click(function(e) {
  e.preventDefault();
  if (isFirstFormValid()) {
    $('a[href="#profile"]').tab('show'); //if first form is valid
  }else{
    alert("All fields required..!"); //give your own message
  }
});

//In the same way check for last submit button which submits form if everything okay. I.e isSecondFormValid()

$("form").submit(function(e) {
  if(isFirstFormValid()){ //also check for second form
  console.log("ready to submit");
  }else{
    alert("Validation Failed");
  }
  e.preventDefault();
});

.nav-tabs {
  border-bottom: 2px solid #DDD;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  border-width: 0;
}

.nav-tabs>li>a {
  border: none;
  color: #666;
}

.nav-tabs>li.active>a,
.nav-tabs>li>a:hover {
  border: none;
  color: #4285F4 !important;
  background: transparent;
}

.nav-tabs>li>a::after {
  content: "";
  background: #4285F4;
  height: 2px;
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: -1px;
  transition: all 250ms ease 0s;
  transform: scale(0);
}

.nav-tabs>li.active>a::after,
.nav-tabs>li:hover>a::after {
  transform: scale(1);
}

.tab-nav>li>a::after {
  background: #21527d none repeat scroll 0% 0%;
  color: #fff;
}

.tab-pane {
  padding: 15px 0;
}

.tab-content {
  padding: 20px
}

.card {
  background: #FFF none repeat scroll 0% 0%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  margin-bottom: 30px;
}

body {
  background: #EDECEC;
  padding: 50px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form name="myForm">
    <div class="row">
      <div class="col-md-6">
        <!-- Nav tabs -->
        <div class="card">
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Person Data</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Address Data</a></li>
          </ul>
          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
              <div class="form-group">
                PersonFirstName <input type="text" required class="form-control" name="PersonFirstName">
              </div>
              <div class="form-group">
                PersonLastName <input type="text" required class="form-control" name="PersonLastName">
              </div>
              <button id="next-submit" type="submit" class="btn btn-default">Next</button>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
              <div class="form-group">
                Address 1 <input required type="text" class="form-control" name="addr1">
              </div>
              <div class="form-group">
                Address 2 <input required type="text" class="form-control" name="addr2">
              </div>
              <button type="submit" id="next-submit" class="btn btn-default">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>