我正在尝试使用Bootstrap 4进行注册。
我认为最简单的方法就是制作标签。但由于某种原因，我的验证无效。
我只使用dafault验证（目前仅在第一个标签页上），但即使没有验证，它仍然会移动到第二个标签。
我做错了什么？ Codeply here
<div class="card mb-3 top-tabs register-card">
<div class="card-header">
<ul class="nav nav-tabs justify-content-md-center" role="tablist">
<li role="presentation" class="nav-item">
<a href="#step1" class="nav-link active" data-toggle="tab" aria-controls="step1" title="Account Details" role="tab">1</a>
</li>
<li role="presentation" class="nav-item">
<a href="#step2" class="nav-link" data-toggle="tab" aria-controls="step2" title="Create Password" role="tab">2</a>
</li>
<li role="presentation" class="nav-item">
<a href="#step3" class="nav-link disable" data-toggle="tab" aria-controls="step3" title="Application" role="tab">3</a>
</li>
<li role="presentation" class="nav-item">
<a href="#complete" class="nav-link disable" data-toggle="tab" aria-controls="complete" title="Finalize" role="tab">4</a>
</li>
</ul>
</div>
</div>
<div class="card register-card">
<div class="card-body">
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<div class="card-header text-center mb-4">
<h4 class="">Account Details</h4>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<label for="validationDefaultUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend2">@</span>
</div>
<input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required="">
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationDefaultUsername">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend2">@</span>
</div>
<input type="email" class="form-control" id="validationDefaultUsername" placeholder="Email" aria-describedby="inputGroupPrepend2" required="">
</div>
</div>
</div>
<button class="btn btn-primary next-step float-right" type="submit">Submit form</button>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<div class="card-header text-center mb-4">
<h4 class="">Create Password</h4>
</div>
<div class="form-group text-center">
<label for="InputPassword">Password</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-lock"></i>
</div>
</div>
<input type="text" class="form-control" id="forminput" placeholder="" required="">
</div>
</div>
<div class="form-group text-center">
<label for="InputPassword">Confirm Password</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-lock"></i>
</div>
</div>
<input type="text" class="form-control" id="forminput" placeholder="" required="">
</div>
</div>
<button type="button" class="btn btn-next next-step float-right">Next</button>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<div class="card-header text-center mb-4">
<h4 class="">Application</h4>
</div>
<p>What is text?</p>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" required=""></textarea>
<hr>
<hr>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radiobutton" value="option1" checked="" required="">
<label class="form-check" for="radio1">
I understand
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radiobutton" value="option2">
<label class="form-check" for="radio2">
I do not understand
</label>
</div>
<button type="button" class="btn btn-next next-step float-right">Next</button>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<div class="card-header text-center mb-4">
<h4 class="">Finalize</h4>
</div>
<div class="tos-scroll" style="height: 200px; overflow: scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec elit eu mauris ultrices pretium. Integer tempor nisi quis pretium egestas. Quisque euismod eros in convallis ultrices. Curabitur ut egestas ligula. Pellentesque rhoncus laoreet orci, in convallis neque congue at. Cras eu velit ante. Suspendisse orci quam, pulvinar ac mattis luctus, posuere ut dolor. Mauris tincidunt at nunc sed egestas. Duis magna elit, condimentum vel sodales quis, ornare et nibh. Sed et eleifend augue, ornare posuere erat. Proin lobortis ornare quam vel bibendum. Morbi imperdiet iaculis arcu at pharetra. Quisque et pharetra lacus, id euismod tortor. Mauris eu leo ut mi tempus commodo sit amet eget enim. Donec quis justo egestas, dictum lorem eget, vestibulum risus. Quisque varius maximus aliquam. Nullam turpis velit, sagittis nec ex in, ultrices ultrices magna. Etiam tristique, nisi a dictum dictum, velit felis feugiat nisi, eu fringilla justo justo nec sem. Nunc maximus magna urna, sit amet mattis orci pulvinar sit amet. Nulla mattis at ex vel ultrices. Duis pretium risus ut lorem blandit, ullamcorper auctor libero porta.
</p>
</div>
<div class="d-flex justify-content-between align-items-center">
<a href="" class="">I accept TOS</a>
<div class="form-group form-check mt-4">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">I agree</label>
</div>
</div>
<button type="button" class="btn btn-next next-step float-right">Finish</button>
</div>
</div></form>
</div>
</div>