<h1 class="text-center mt-5 mb-4 text-light font-weight-bold">Form with Multiple Steps</h1>
<form id="regForm" class="form-with-stepper">
<h1>Register</h1>
<div class="tab">
<h5 class="mt-4 mb-0">Name:</h5>
<!-- Material input -->
<div class="md-form">
<input type="text" id="form1" class="form-control" oninput="this.className = 'form-control'" name="fname">
<label for="form1">First name</label>
</div>
<div class="md-form">
<input type="text" id="form1" class="form-control" oninput="this.className = 'form-control'" name="lname">
<label for="form1">Last name</label>
</div>
</div>
<div class="tab">
<h5 class="mt-4 mb-0">Contact Info:</h5>
<!-- Material input -->
<div class="md-form">
<input type="email" id="form1" class="form-control" oninput="this.className = 'form-control'" name="email">
<label for="form1">E-mail</label>
</div>
<div class="md-form">
<input type="tel" id="form1" class="form-control" oninput="this.className = 'form-control'" name="phone">
<label for="form1">Phone</label>
</div>
</div>
<div class="tab">
<h5 class="mt-4 mb-0">Birthday:</h5>
<div class="md-form">
<input type="text" id="form1" class="form-control" oninput="this.className = 'form-control'" name="dd">
<label for="form1">dd</label>
</div>
<div class="md-form">
<input type="text" id="form1" class="form-control" oninput="this.className = 'form-control'" name="mm">
<label for="form1">mm</label>
</div>
<div class="md-form">
<input type="text" id="form1" class="form-control" oninput="this.className = 'form-control'" name="yyyy">
<label for="form1">yyyy</label>
</div>
</div>
<div class="tab">
<h5 class="mt-4 mb-0">Login Info:</h5>
<div class="md-form">
<input type="text" id="form1" class="form-control" oninput="this.className = 'form-control'" name="uname">
<label for="form1">Username</label>
</div>
<div class="md-form">
<input id="form1" class="form-control" oninput="this.className = 'form-control'" name="password"
type="password">
<label for="form1">Password</label>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<button class="btn btn-blue-grey btn-rounded prevBtn" type="button" id="prevBtn"
onclick="nextPrev(-1)">Previous</button>
</div>
<div class="col-6">
<button class="btn btn-success btn-rounded nextBtn" type="button" id="nextBtn"
onclick="nextPrev(1)">Next</button>
</div>
</div>
<div class="text-center mt-5">
<span class="step" data-number="0"></span>
<span class="step" data-number="1"></span>
<span class="step" data-number="2"></span>
<span class="step" data-number="3"></span>
</div>
</form>
<div class="container registration-successful">
<div class="text-center pt-4">
<h2 class="text-center display-4 mt-4 font-weight-bold">Registered!</h2>
</div>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 95vh;
background-size: cover;
background-repeat: no-repeat;
background-image: url('https://images.pexels.com/photos/768972/pexels-photo-768972.jpeg');
}
.registration-successful {
display: none;
margin: 0px auto;
background: #fff;
height: 300px;
width: 500px;
border-radius: 10px;
border: 2px solid #00c851;
color: #00c851 !important;
}
.header {
font-size: 50px;
}
.form-with-stepper {
background-color: #ffffff;
margin: 0px auto;
font-family: Roboto;
padding: 40px;
width: 40%;
min-width: 300px;
border-radius: 10px;
}
.form-with-stepper .tab input.invalid {
background-color: #ffdddd;
}
.tab {
display: none;
}
.btn {
width: 100%;
font-size: 1.1rem;
border: 2px solid transparent;
}
.prevBtn:hover {
background-color: #f8f9fa !important;
color: #78909c;
border: 2px solid #78909c;
}
.nextBtn:hover {
background-color: #f8f9fa !important;
color: #28a745;
border: 2px solid #28a745;
}
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
.step.finish {
background-color: #28a745;
}
let currentTab = 0;
showTab(currentTab);
function showTab(number) {
let $tabs = $('.tab');
let $openTab = $($tabs[number]);
let $prevBtn = $('#prevBtn');
let $nextBtn = $('#nextBtn');
$openTab.css("display", "block");
number == 0 ? $prevBtn.css("display", "none") : $prevBtn.css("display", "inline");
number == ($tabs.length - 1) ? $nextBtn.text("Submit") : $nextBtn.text("Next");
fixStepIndicator(number);
}
function fixStepIndicator(number) {
$steps = $('.step');
$currentStep = $($steps[number]);
$steps.each(function (e) {
$this = $(this);
$this.removeClass('active');
})
$currentStep.addClass("active");
}
function nextPrev(number) {
let $tabs = $('.tab');
// (number == 1 && !validateForm()) ? (return false) : "";
if (number == 1 && !validateForm()) return false;
$($tabs[currentTab]).css("display", "none");
currentTab = currentTab + number;
if (currentTab >= $tabs.length) {
$('#regForm').css('display', 'none');
$('.registration-successful').css('display', 'block');
return false;
}
showTab(currentTab);
}
function validateForm() {
let $tabs = $('.tab');
let $currentTabInputs = $($tabs[currentTab].getElementsByTagName("input"));
let i = 0;
let valid = true;
$currentTabInputs.each(function (e) {
let $currentTabInput = $($currentTabInputs[e])
if ($currentTabInput.val() == "") {
$currentTabInput.addClass('invalid');
valid = false;
}
})
valid ? $($('.step')[currentTab]).addClass('finish') : false;
return valid;
}