jQuery-Smart-Wizard
jQuery-Smart-Wizard copied to clipboard
Published
20 hours ago •
mstratman
mstratman
Enable next button when all the required / "*" fields are Filled by user. Or the next button should stay disabled.
<title>Gentelella Alela! | </title>
<!-- Bootstrap -->
<link href="F:\OneDrive - CONTEXIO LLP\JD\Onboarding demos\css\bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="F:\OneDrive - CONTEXIO LLP\JD\Onboarding demos\css\font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="F:\OneDrive - CONTEXIO LLP\JD\Onboarding demos\css\nprogress.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="F:\OneDrive - CONTEXIO LLP\JD\Onboarding demos\css\custom.min.css" rel="stylesheet">
<style>
span.required {
color:red;
}
</style>
<div class="clearfix"></div>
<!-- menu profile quick info -->
<div class="profile clearfix">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>John Doe</h2>
</div>
</div>
<!-- /menu profile quick info -->
<br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="index.html">Dashboard</a></li>
<li><a href="index2.html">Dashboard2</a></li>
<li><a href="index3.html">Dashboard3</a></li>
</ul>
</li>
<li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="form.html">General Form</a></li>
<li><a href="form_advanced.html">Advanced Components</a></li>
<li><a href="form_validation.html">Form Validation</a></li>
<li><a href="form_wizards.html">Form Wizard</a></li>
<li><a href="form_upload.html">Form Upload</a></li>
<li><a href="form_buttons.html">Form Buttons</a></li>
</ul>
</li>
<li><a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="general_elements.html">General Elements</a></li>
<li><a href="media_gallery.html">Media Gallery</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="glyphicons.html">Glyphicons</a></li>
<li><a href="widgets.html">Widgets</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="inbox.html">Inbox</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
</li>
<li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="tables.html">Tables</a></li>
<li><a href="tables_dynamic.html">Table Dynamic</a></li>
</ul>
</li>
<li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="chartjs.html">Chart JS</a></li>
<li><a href="chartjs2.html">Chart JS2</a></li>
<li><a href="morisjs.html">Moris JS</a></li>
<li><a href="echarts.html">ECharts</a></li>
<li><a href="other_charts.html">Other Charts</a></li>
</ul>
</li>
<li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
<li><a href="fixed_footer.html">Fixed Footer</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu_section">
<h3>Live On</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="e_commerce.html">E-commerce</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="project_detail.html">Project Detail</a></li>
<li><a href="contacts.html">Contacts</a></li>
<li><a href="profile.html">Profile</a></li>
</ul>
</li>
<li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="page_403.html">403 Error</a></li>
<li><a href="page_404.html">404 Error</a></li>
<li><a href="page_500.html">500 Error</a></li>
<li><a href="plain_page.html">Plain Page</a></li>
<li><a href="login.html">Login Page</a></li>
<li><a href="pricing_tables.html">Pricing Tables</a></li>
</ul>
</li>
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="#level1_1">Level One</a>
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu"><a href="level2.html">Level Two</a>
</li>
<li><a href="#level2_1">Level Two</a>
</li>
<li><a href="#level2_2">Level Two</a>
</li>
</ul>
</li>
<li><a href="#level1_2">Level One</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
<!-- /menu footer buttons -->
<div class="sidebar-footer hidden-small">
<a data-toggle="tooltip" data-placement="top" title="Settings">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="FullScreen">
<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="Lock">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</a>
</div>
<!-- /menu footer buttons -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="images/img.jpg" alt="">John Doe
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<li><a href="javascript:;"> Profile</a></li>
<li>
<a href="javascript:;">
<span class="badge bg-red pull-right">50%</span>
<span>Settings</span>
</a>
</li>
<li><a href="javascript:;">Help</a></li>
<li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-green">6</span>
</a>
<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<div class="text-center">
<a>
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Form Wizards</h3>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<!--<div class="x_title">
<h2>Form Wizards <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>-->
<div class="x_content">
<!-- Smart Wizard -->
<p>Kindly fill all the necessary details listed below.</p>
<div id="wizard" class="form_wizard wizard_horizontal">
<ul class="wizard_steps">
<li>
<a href="#step-1">
<span class="step_no">1</span>
<span class="step_descr">
Step 1<br />
<small>Basic Information</small>
</span>
</a>
</li>
<li>
<a href="#step-2">
<span class="step_no">2</span>
<span class="step_descr">
Step 2<br />
<small>Personal Information</small>
</span>
</a>
</li>
<li>
<a href="#step-3">
<span class="step_no">3</span>
<span class="step_descr">
Step 3<br />
<small>Education Qualification</small>
</span>
</a>
</li>
<li>
<a href="#step-4">
<span class="step_no">4</span>
<span class="step_descr">
Step 4<br />
<small>Work Experience</small>
</span>
</a>
</li>
<li>
<a href="#step-5">
<span class="step_no">5</span>
<span class="step_descr">
Step 5<br />
<small>Bank Details for Salary processing</small>
</span>
</a>
</li>
</ul>
<!--Basic details start-->
<div id="step-1">
<br>
<!--<h2 class="StepTitle">Basic details</h2>-->
<form id="basicDetails" class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Full Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input name="first-name" onchange="validateName()" type="text" id="first-name" required="required" class="form-control col-md-7 col-xs-12" placeholder="Enter your full name e.g. Jane John Doe">
</div>
</div><br>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Gender <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="btn-group">
<label id="gender" class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
<input type="radio" onchange="validateGender()" id="male" name="gender" value="male"> Male
</label>
<label class="btn btn-primary" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
<input type="radio" onchange="validateGender()" id="female" name="gender" value="female"> Female
</label>
</div>
</div>
</div><br>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of Birth <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="birthday" onchange="validateBirthdate()" class="date-picker form-control col-md-7 col-xs-12" required="required" type="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Personal Email <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="email" onchange="validateEmail()" id="email" name="email" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="number">Mobile Number <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="number" id="number" onchange="validateMobileNumber()" name="number" required="required" data-validate-minmax="10,100" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="altnumber">Alternate Number</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="number" id="altnumber" name="altnumber" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="currentAddress">Current Address <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<textarea id="currentAddress" onchange="validateCurrentAddress()" required="required" name="currentAddress" class="form-control col-md-7 col-xs-12"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="permanentAddress">Permanent Address <br><small>(If different from current address) </small></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<textarea id="permanentAddress" name="permanentAddress" class="form-control col-md-7 col-xs-12"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="bloodGroup">Blood Group <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="select2_single form-control" id="bloodGroup" onchange="validateBloodGroup()" name="bloodGroup" tabindex="-1">
<option>--- Select Blood Group ---</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="maritalStatus">Marital Status <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="select2_single form-control" id="maritalStatus" onchange="validateMaritalStatus()" name="maritalStatus" tabindex="-1">
<option value="">--- Select Options ---</option>
<option value="married">Married</option>
<option value="unmarried">Unmarried</option>
<option value="prefernottosay">Prefer not to say</option>
</select>
</div>
</div><br>
</form>
</div>
<!--Basic details end-->
<!--Personal details start-->
<div id="step-2">
<!--<h2 class="StepTitle">Personal details</h2>-->
<br>
<form id="personalDetails" class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="aadhaar">Aadhaar Number <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="aadhaar" name="aadhaar" pattern="[0-9]{12}" onchange="validateAadhaar()" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="aadhaarName">Name (as per Aadhaar Card)</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="aadhaarName" name="aadhaarName" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="aadhaarUpload">Upload Aadhaar Card <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="file" onchange="validateAadhaarUpload()" id="aadhaarUpload" name="aadhaarUpload" accept="application/pdf,image/*" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="pan">PAN Card Number</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="pan" name="pan" pattern="[A-Z0-9]{10}" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="panName">Name (as per PAN Card)</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="panName" name="panName" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="panUpload">Upload PAN Card</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="file" id="panUpload" name="panUpload" accept="application/pdf,image/*" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="photoUpload">Upload Passport Size Photo <span class="required">*</span><br><small>(in .jpg or .png format)</small></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="file" onchange="validatePhotoUpload()" id="photoUpload" name="photoUpload" accept=".jpg,.jpeg,.png" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="otherUpload">Upload Other Documents </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="file" id="otherUpload" name="otherUpload" accept="application/pdf,image/*">
</div>
</div><br>
</form>
</div>
<!--Personal details end-->
<!--Education Qualification start-->
<div id="step-3">
<br>
<!--<h2 class="StepTitle">Education Qualification</h2>-->
<form id="eduQualifi" class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="highestQualification">Highest Qualification <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="select2_single form-control" id="highestQualification" onchange="validateHighestQualification()" name="highestQualification" tabindex="-1">
<option value="">--- Select Qualification ---</option>
<option value="graduate">Graduate</option>
<option value="undergraduate">Under-Graduate</option>
<option value="postgraduate">Post-Graduate</option>
<option value="diploma">Diploma</option>
<option value="master">Master</option>
<option value="phd">Ph.D</option>
<option value="others">Others</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="highestDegree">Highest Degree <span class="required">*</span><br><small>(Field name)</small></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="highestDegree" onchange="validateHighestDegree()" name="highestDegree">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="yearOfPassing">Year of Passing <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="number" id="yearOfPassing" onchange="validateYearOfPassing()" name="yearOfPassing">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="finalGrade">Final Grade/Percentage <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="finalGrade" onchange="validateFinalGrade()" name="finalGrade">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="graduationCertificate">Upload Your Graduation Certificate <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="file" id="graduationCertificate" onchange="validateGraduationCertificateUpload()" name="graduationCertificate">
</div>
</div> <br>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="currentlyEnrolled">Currently Enrolled in Any Course</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<label for="currentlyEnrolledYes" class="btn btn-default">
<input type="radio" name="currentlyEnrolled" id="currentlyEnrolledYes" for="currentlyEnrolledYes" value="yes"> Yes
</label>
<label class="btn btn-default">
<input type="radio" name="currentlyEnrolled" id="currentlyEnrolledNo" for="currentlyEnrolledNo" value="no"> No
</label>
</div>
</div> <br>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="courseName">If Yes, Name of the Course</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="courseName" name="courseName">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="courseType">If Yes, Type of Course</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="select2_single form-control" id="courseType" name="courseType" tabindex="-1">
<option value="">--- Select Type ---</option>
<option value="fullTime">Full Time</option>
<option value="partTime">Part Time</option>
<option value="online">Online</option>
<option value="weekends">Weekends</option>
<option value="others">Others</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="courseDuration">If Yes, Duration of the Course</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="courseDuration" name="courseDuration">
</div>
</div> <br>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="futurePlans">Future Plans for Higher Studies</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<label for="futurePlansYes" class="btn btn-default">
<input type="radio" name="futurePlans" id="futurePlansYes" for="futurePlansYes" value="yes"> Yes
</label>
<label for="futurePlansNo" class="btn btn-default">
<input type="radio" name="futurePlans" id="futurePlansNo" for="futurePlansNo" value="no"> No
</label>
<label for="futurePlansNotDecided" class="btn btn-default">
<input type="radio" name="futurePlans" id="futurePlansNotDecided" for="futurePlansNotDecided" value="notDecided"> Not Decided
</label>
</div>
</div><br>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="courseName">If Yes, Name of the Course</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="courseName" name="courseName">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="courseDuration">If Yes, Duration of the Course</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="courseDuration" name="courseDuration">
</div>
</div><br>
</form>
</div>
<!--Education Qualification end-->
<!--Work Experience start-->
<div id="step-4">
<br>
<!--<h2 class="StepTitle">Step 4 Content</h2>-->
<form id="workexp" class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="total-experience">Total years of experience <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="select2_single form-control" id="total-experience" onchange="validateTotalYearsExperience()" name="total-experience" tabindex="-1">
<option value="">--- Select Your Experience ---</option>
<option value="0">0 years</option>
<option value="1-3">1-3 years</option>
<option value="4-6">4-6 years</option>
<option value="7-10">7-10 years</option>
<option value="11-15">11-15 years</option>
<option value="15+">15+ years</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-company">Last Company Name</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="last-company" name="last-company" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-designation">Last designation</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="last-designation" name="last-designation" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-salary-slip">Upload your last 3 months salary slip</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="file" id="last-salary-slip" name="last-salary-slip" accept=".pdf,.jpg,.jpeg,.png" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="appointment-letter">Upload your Last Appointment / Offer / Appraisal Letter</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="file" id="experience-letter" name="experience-letter" accept=".pdf,.jpg,.jpeg,.png" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="experience-letter">Upload your Last Relieving Experience Letter</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="file" id="last-salary-slip" name="last-salary-slip" accept=".pdf,.jpg,.jpeg,.png" required>
</div>
</div><br>
</form>
</div>
<!--Work Experience end-->
<!--Bank details start-->
<div id="step-5">
<br>
<!--<h2 class="StepTitle">Step 4 Content</h2>-->
<form id="bankDetails" class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="bankName">Name of Bank <span class="required">*</span><br>
<small>(Kindly avoid sharing the details of SCHEDULED bank)</small></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="bankName" onchange="validateBankName()" name="bankName" required>
</div>
</div><!--<br><br><br><br>-->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="accountName">Name as on Bank Passbook / Cheque book</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="accountName" name="accountName"><br><br><br>
</div>
</div><!--<br><br><br>-->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="branchName">Branch Name <span class="required">*</span><br>
<small>(Kindly avoid sharing the details of SCHEDULED bank)</small></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="branchName" onchange="validateBranchName()" name="branchName" required>
</div>
</div><!--<br><br><br><br>-->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="branchAddress">Branch Address <span class="required">*</span><br>
<small>(Kindly avoid sharing the details of SCHEDULED bank)</small></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<textarea class="form-control col-md-7 col-xs-12" id="branchAddress" onchange="validateBranchAddress()" required></textarea>
</div>
</div><!--<br><br><br>-->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="accountNumber">Bank Account Number <span class="required">*</span><br>
<small>(Kindly avoid sharing the details of SCHEDULED bank)</small></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="accountNumber" onchange="validateBankAccountNumber()" name="accountNumber" required pattern="[0-9]{9,18}">
</div>
</div><!--<br><br><br><br>-->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="ifscCode">Bank IFSC Code <span class="required">*</span><br>
<small>(Kindly avoid sharing the details of SCHEDULED bank)</small></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="text" id="ifscCode" name="ifscCode" onchange="validateIFSC()" required pattern="[A-Z|a-z]{4}[0][a-zA-Z0-9]{6}">
</div>
</div><!--<br><br><br><br> -->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="passbookCopy">Upload Bank Passbook Copy <span class="required">*</span><br>
<small>(Kindly upload the 1st page of your Bank Passbook where your details and bank details are clearly visible)</small></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="file" id="passbookCopy" onchange="validatePassbookUpload()" name="passbookCopy" required>
</div>
</div><!--<br><br><br><br> -->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="chequeCopy">Upload Blank Cheque Copy<br>
<small>(Kindly upload the copy of your cheque with your name, bank name, branch name, Account number, IFSC code is clearly visible)</small></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input class="form-control col-md-7 col-xs-12" type="file" id="chequeCopy" name="chequeCopy" required>
</div>
</div>
</form>
</div>
<!--Bank details end-->
</div>
<!-- End SmartWizard Content -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
<!-- footer content
<footer>
<div class="pull-right">
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
</div>
<div class="clearfix"></div>
</footer>
footer content -->
</div>
</div>
<!-- jQuery -->
<script src="F:\OneDrive - CONTEXIO LLP\JD\Onboarding demos\js\jquery.min.js"></script>
<!-- Bootstrap -->
<script src="F:\OneDrive - CONTEXIO LLP\JD\Onboarding demos\js\bootstrap.min.js"></script>
<!-- FastClick -->
<script src="F:\OneDrive - CONTEXIO LLP\JD\Onboarding demos\js\fastclick.js"></script>
<!-- NProgress -->
<script src="F:\OneDrive - CONTEXIO LLP\JD\Onboarding demos\js\nprogress.js"></script>
<!-- jQuery Smart Wizard -->
<script src="F:\OneDrive - CONTEXIO LLP\JD\Onboarding demos\js\jquery.smartWizard.js"></script>
<!-- Custom Theme Scripts -->
<script src="F:\OneDrive - CONTEXIO LLP\JD\Onboarding demos\js\custom.min.js"></script>
