Как сделать степпер вручную с помощью jquery
Привет, я разработал форму, которая состоит из трех вкладок, что я имею в виду при загрузке страницы, только первая вкладка должна отображаться, когда пользователь заполнил все поля первой вкладки, тогда только вторая вкладка должна отображаться, а затем третья вкладка. После входа в третью вкладку я должен видеть все вкладки. когда я нажму на финиш, я смогу отправить все данные на сервер.
Вот моя скрипка: https://jsfiddle.net/nwtrwh6a/
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Personal Info</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Contact Info</a></li>
<li 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 id="registrationForm" method="post" class="form-horizontal" action="">
<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 type="text" class="form-control" name="studentFirstName" id="fn" placeholder="First name" />
</div>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="studentMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="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 type="Text" class="form-control" name="studentDOB" placeholder="DOB" /> <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="studentGender" value="male" />Male</label>
<label class="btn btn-default">
<input type="radio" name="studentGender" value="female" />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 type="text" class="form-control" name="placeOFBirth" placeholder="Place of Birth" />
</div>
<label class="col-xs-3 control-label">Mother Toungue</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="motherToungue" 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 type="text" class="form-control" name="bloodGroup" placeholder="Blood Group" />
</div>
<label class="col-xs-3 control-label">Class To Join</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="className" placeholder="Class To Join" />
</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="image" placeholder="Email" />
</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 type="text" class="form-control" name="fatherFirstName" id="fn" placeholder="First name" />
</div>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="fatherMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="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 type="text" class="form-control" name="motherFirstName" id="fn" placeholder="First name" />
</div>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="motherMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="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 type="text" class="form-control" name="gaurdianFirstName" id="fn" placeholder="First name" />
</div>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="gaurdianMiddleName" placeholder="Middle name" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="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 type="text" class="form-control" name="occupation" placeholder="Occupation" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Qualification</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="qualification" placeholder="Qualification" />
</div>
<label class="col-xs-3 control-label">Income</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="income" placeholder="Income" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Nationality</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="nationality" placeholder="Ex: Indian" />
</div>
<label class="col-xs-3 control-label">Religion</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="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 type="text" class="form-control" name="caste" placeholder="Ex:Okkaliga,Lingayath" />
</div>
<label class="col-xs-3 control-label">Category</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="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="Submit" class="btn btn-primary">Proceed</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 type="text" class="form-control" name="phoneNumber" placeholder="Phone Number" />
</div>
<label class="col-xs-3 control-label">Emergency Contact</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="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 type="text" class="form-control" name="email" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Permanent Address</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="permanentAddress" placeholder="Caste" />
</div>
<label class="col-xs-3 control-label">Present Address</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="presentAddress" placeholder="Category" />
</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-primary">Proceed</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 type="text" class="form-control" name="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 type="Text" class="form-control" name="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 type="Text" class="form-control" name="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 type="text" class="form-control" name="reasonForChange" placeholder="Reason for Change" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Tc Number</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="tcNumber" placeholder="Tc Number" />
</div>
<label class="col-xs-3 control-label">TC Date</label>
<div class="col-xs-3 ">
<div class="input-group input-append date" id="tcDate">
<input type="Text" class="form-control" name="tcDate" placeholder="TC Date" /> <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">Tc Document</label>
<div class="col-xs-9">
<input type="file" class="form-control" name="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>