如何使用bootstrap验证器（如步进器）进行表单验证

Question

大家好，我期待使用bootstrap验证器进行表单验证。 在我的设计中我有三个选项卡，功能应该是这样的 在页面加载时，只有第一个选项卡应该在用户点击时打开，然后应该验证第一个选项卡的所有元素，然后才打开第二个选项卡。如果用户点击完成表单应该发送到服务器

https://jsfiddle.net/ym3yk38m/4/

.nav-tabs { border-bottom: 6px solid #DDD; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus,.nav-tabs > li.active > a:focus {border: none;background:#f8f8f8; } .nav-tabs > li.active > a:hover { border-width: 0;background:#f8f8f8;}
.nav-tabs > li > a { border: none; color: #666; padding:10px 95px; width:500px; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none;background:#f8f8f8; }
.nav-tabs > li > a::after { content: ""; background: #00a8a8; height: 7px; 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}

<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
    
     <!-- Custom Theme JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
	
	<!--bootstrapValidator-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    
    
<!-- Date picker css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
<div id="wrapper">
		<!-- Navigation -->
		<nav class="navbar navbar-default navbar-static-top" role="navigation"
			style="margin-bottom: 0">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="index.html"></a>
			</div>
			<!-- /.navbar-header -->

			<ul class="nav navbar-top-links navbar-right">
			</ul>
			<!-- /.navbar-top-links -->
			<div class="navbar-default sidebar" role="navigation">
				<div class="sidebar-nav navbar-collapse">
					<ul class="nav" id="side-menu">		
						
					</ul>
				</div>
				<!-- /.sidebar-collapse -->
			</div>
			<!-- /.navbar-static-side -->
		</nav>
		<!-- Page Content -->
		<div id="page-wrapper">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-12">
						<h3 class="page-header">
							<b>Student Self Enrollment</b>
						</h3>
					</div>
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
							 <ul class="nav nav-tabs" role="tablist">
                                         <li class="col-lg-4 role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Personal Info</a></li>
                                        <li class="col-lg-4 role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Contact Info</a></li>
                                        <li class="col-lg-4 role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Previous Educational Info</a></li>                                    
                               </ul>							
							</div>
							<!-- /.panel-heading -->
							<div class="panel-body">
								<div class="form-body">
									<form class="form-horizontal" method="post">
									   <div class="tab-content">
									   								
									 <!--Personal info tab div -->
                                        <div role="tabpanel" class="tab-pane active" id="home">
										<h3 style="color: red">Student Details</h3>
										
										<div class="form-group">
											<label class="col-xs-2 control-label">Student Name</label>
											<!--<div class="group">-->
											<div class="col-xs-3">
												<input name="student.studentFirstName" type="text" class="form-control" id="studentFirstName" placeholder="First Name" />
												
											</div>											
											<div class="col-xs-3">
												<input name="student.studentMiddleName" type="text" class="form-control" id="studentMiddleName" placeholder="Middle name" />
												
											</div>
											<div class="col-xs-3">												
												<input name="student.studentLastName" type="text" class="form-control" id="studentLastName" placeholder="Last name" />
												
											</div>										
										</div>

										 <div class="form-group">
										<label class="col-xs-2 control-label">Date-of-birth</label>
											<div class="col-xs-3 ">
												
												<div class="input-group input-append date" id="studentDOB">													
													<input name="student.studentDOB" type="text" class="form-control"  placeholder="Date-Of-Birth" />
													
													<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
												</div>
											</div>
											<label class="col-xs-3 control-label">Gender</label>
											<div class="col-xs-3">
												<div class="btn-group" data-toggle="buttons">
													<label class="btn btn-default">													
													<input type="radio" name="optradio">Male</label>
													 <label class="btn btn-default"> 
													 <input type="radio" name="optradio">Female</label>
												</div>
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Place of Birth </label>
											<div class="col-xs-3">
												<input name="student.studentBirthPlace" type="text" class="form-control" id="studentBirthPlace" placeholder="Place of Birth" />
												
											</div>
											<label class="col-xs-3 control-label">Mother Toungue</label>
											<div class="col-xs-3">
												<input name="student.studentMotherTounge" type="text" class="form-control" id="studentMotherTounge" placeholder="Mother Toungue" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Blood Group </label>
											<div class="col-xs-3">
												<input name="student.studentBloodGroup" type="text" class="form-control" id="studentBloodGroup" placeholder="Blood Group" />
												
											</div>
											<label class="col-xs-3 control-label">Class Name</label>
											<div class="col-xs-3">												
														<select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
													</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Image</label>
											<div class="col-xs-9">
												<input type="file" class="form-control" name="student.studentImage"/>
											</div>
										</div>

										<h3 style="color: red">Parent Details</h3>

										<div class="form-group">
											<label class="col-xs-2 control-label">Father Name</label>
											<div class="group">
											<div class="col-xs-3">
												<input name="parent.fatherFirstName" type="text" class="form-control" id="fatherFirstName" placeholder="First name" />
												
											</div>
											</div>
											<div class="col-xs-3">
												<input name="parent.fatherMiddleName" type="text" class="form-control" id="fatherMiddleName" placeholder="Middle name" />
												
											</div>
											<div class="col-xs-3">
												<input name="parent.fatherLastName" type="text" class="form-control" id="fatherLastName" placeholder="Last name" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Mother Name</label>
											<div class="group">
											<div class="col-xs-3">
												<input name="parent.motherFirstName" type="text" class="form-control" id="motherFirstName" placeholder="First name" />
												
											</div>
											</div>
											<div class="col-xs-3">
												<input name="parent.motherMiddleName" type="text" class="form-control" id="motherMiddleName" placeholder="Middle name" />
												
											</div>
											<div class="col-xs-3">
												<input name="parent.motherLastName" type="text" class="form-control" id="motherLastName" placeholder="Last name" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Gaurdian Name</label>
											<div class="group">
											<div class="col-xs-3">
												<input name="parent.gaurdianFirstName" type="text" class="form-control" id="gaurdianFirstName" placeholder="First name" />
												
											</div>
											</div>
											<div class="col-xs-3">
												<input name="parent.gaurdianMiddleName" type="text" class="form-control" id="gaurdianMiddleName" placeholder="Middle name" />
												
											</div>
											<div class="col-xs-3">
												<input name="parent.gaurdianLastName" type="text" class="form-control" id="gaurdianLastName" placeholder="Last name" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Occupation</label>
											<div class="col-xs-9">
												<input name="parent.occupation" type="text" class="form-control" id="occupation" placeholder="Occupation" />
												
											</div>
										</div>


										<div class="form-group">
											<label class="col-xs-2 control-label">Qualification</label>
											<div class="col-xs-3">
												<input name="parent.qualification" type="text" class="form-control" id="qualification" placeholder="Qualification" />
												
											</div>
											<label class="col-xs-3 control-label">Income</label>
											<div class="col-xs-3">
												<input name="parent.income" type="text" class="form-control" id="income" placeholder="Income" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Nationality</label>
											<div class="col-xs-3">
												<input name="student.nationality" type="text" class="form-control" id="nationality" placeholder="Ex: Indian"/>
												
											</div>
											<label class="col-xs-3 control-label">Religion</label>
											<div class="col-xs-3">
												<input name="student.religion" type="text" class="form-control" id="religion" placeholder="EX: Hindhu Muslim..."/>
												
											</div>
										</div>
										
										<div class="form-group">
											<label class="col-xs-2 control-label">Caste</label>
											<div class="col-xs-3">
												<input name="student.caste" type="text" class="form-control" id="caste" placeholder="Ex:Okkaliga,Lingayath"/>
												
											</div>
											<label class="col-xs-3 control-label">Category</label>
											<div class="col-xs-3">
												<input name="student.category" type="text" class="form-control" id="category" placeholder="Ex:3a,2a...."/>
												
											</div>
										</div>

										<div class="form-group">
										<label class="col-xs-11 control-label"></label>
											<div class="col-xs-20 ">
												<button type="button" class="btn btn-primary">Next</button>
											</div>											
										</div>								           								
										</div>
										
										<!--Contact info tab div -->
                                        <div role="tabpanel" class="tab-pane" id="profile">
										
										<div class="form-group">
											<label class="col-xs-2 control-label">Phone Number</label>
											<div class="col-xs-3">
												<input name="parent.phoneNumber" type="text" class="form-control" id="phoneNumber" placeholder="Phone Number"/>
												
											</div>
											<label class="col-xs-3 control-label">Emergency Contact</label>
											<div class="col-xs-3">
												<input name="parent.emergencyContact" type="text" class="form-control" id="emergencyContact" placeholder="Emergency Contact" />
												
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Email</label>
											<div class="col-xs-9">
												<input name="parent.emailID" type="text" class="form-control" id="email" placeholder="Email"/>
												
											</div>
										</div>

											<div class="form-group">
											<label class="col-xs-2 control-label">Permanent Address</label>
											<div class="col-xs-3">												
												<textarea class="form-control" name="student.permanentAddress" rows="5" cols="30" />
											</div>
											<label class="col-xs-3 control-label">Present Address</label>
											<div class="col-xs-3">
												<textarea class="form-control" name="student.presentAddress" rows="5" cols="30" />
											</div>
										</div>

									<div class="form-group">
										<label class="col-xs-11 control-label"></label>
											<div class="col-xs-20 ">
												<button type="button" class="btn btn-primary">Next</button>
											</div>											
										</div>
								</div>
										
										<!--Previous Educational info tab div -->
                                        <div role="tabpanel" class="tab-pane" id="messages">
										
										<div class="form-group">
											<label class="col-xs-2 control-label">School Name</label>
											<div class="col-xs-9">
												<input name="student.previousSchoolName" type="text" class="form-control" id="schoolName" placeholder="Previous School Name"/>
												
											</div>
										</div>
										
										<div class="form-group">
											<label class="col-xs-2 control-label">From</label>
											<div class="col-xs-3 ">
												<div class="input-group input-append date" id="from">
													<input name="student.fromYear" type="text" class="form-control" id="from" placeholder="From Year"/>
													
													<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
												</div>
											</div>

											<label class="col-xs-3 control-label">To</label>
											<div class="col-xs-3 ">
												<div class="input-group input-append date" id="to">
													<input name="student.toYear" type="text" class="form-control" id="to" placeholder="To Year"/>
													
													<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
												</div>
											</div>
										</div>

										<div class="form-group">
											<label class="col-xs-2 control-label">Reason for Change</label>
											<div class="col-xs-9">
												<input name="student.reasonForChange" type="text" class="form-control" id="reasonForChange" placeholder="Reason for Change"/>
												
											</div>
										</div>

											
										
										<div class="form-group">
											<label class="col-xs-2 control-label">Tc Document</label>
											<div class="col-xs-9">
												<input type="file" class="form-control" name="student.tcDocument"  />
											</div>
										</div>						
 
											<div class="form-group">
										<label class="col-xs-11 control-label"></label>
											<div class="col-xs-20 ">
												<button type="Submit" class="btn btn-success">Finish</button>
											</div>											
										</div>										       
										</div>										
                                    </div>									
									</form>
								</div>
								<!-- /.form-body -->
							</div>
							<!-- /.panel-body -->
						</div>
						<!-- /.panel -->
					</div>
					<!-- /.col-lg-12 -->
				</div>
				<!-- /.row -->
			</div>
			<!-- /.container-fluid -->
		</div>
		<!-- /#page-wrapper -->
	</div>