<div class="showcontent">
<div class="container">
<form action="" id="reg">
<h1>Register</h1>
<div class="tab">Name:
<p><input type="text" name="fname" id="fname" placeholder="First Name.."></p>
<p><input type="text" name="lname" id="lname" placeholder="Last Name.."></p>
</div>
<div class="tab">Contact Info:
<p><input type="email" name="email" id="email" placeholder="Email.."></p>
<p><input type="text" name="phone" id="phone" placeholder="phone.."></p>
</div>
<div class="tab">Date of Birth:
<p><input type="text" name="dd" id="dd" placeholder="dd"></p>
<p><input type="text" name="mm" id="mm" placeholder="mm"></p>
<p><input type="text" name="yy" id="yy" placeholder="yyyy"></p>
</div>
<div class="btnclass" style="overflow: auto;">
<div style="float: right;">
<button type="button" onclick="nextprev(-1)" id="prev">Prev</button>
<button type="button" id="next" onclick="nextprev(1)">Next</button>
</div>
</div>
<div class="indicator">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
</div>
</div>
.showcontent form{
background-color: white;
width: 90%;
margin: auto;
padding: 10px;
}
.tab{
display: none;
}
.tab input{
padding: 8px 16px;
font-size: 17px;
width: 100%;
}
.tab p{
margin-top: 3px;
margin-bottom: 3px;
}
input.invalid{
background-color: #444;
}
.indicator{
display: flex;
align-items: center;
justify-content: center;
}
.btnclass button{
border: none;
cursor: pointer;
padding: 8px 12px;
border-radius: 5px;
background-color: #aaa;
}
.btnclass #next{
background-color: rgb(19, 221, 174);
color: white;
}
.indicator span{
height: 15px;
border-radius: 50%;
width: 15px;
background-color: rgb(155, 149, 149);
display: inline-block;
margin: 1px;
}
.indicator .finish{
background-color: rgb(49, 238, 11);
opacity: 0.6;
}
.indicator .active{
background-color: dodgerblue;
}
let currentTab=0;
showTab(currentTab);
function showTab(n){
let x=document.getElementsByClassName("tab");
//console.log(x);
x[n].style.display="block";
if(n==0){
document.getElementById("prev").style.display='none';
}
else{
document.getElementById("prev").style.display='inline';
}
if(n==x.length-1){
document.getElementById("next").innerHTML="Submit";
}
else{
document.getElementById("next").innerHTML="Next";
}
fiexIndicator(n);
}
function nextprev(n){
let x=document.getElementsByClassName("tab");
if(n==1 && !validation()){
return false;
}
x[currentTab].style.display='none';
currentTab+=n;
if(currentTab>=x.length){
document.getElementById("reg").submit();
return false;
}
showTab(currentTab);
}
function validation(){
let x=document.getElementsByClassName("tab");
let y=x[currentTab].getElementsByTagName("input");
//console.log(y);
let valid=true;
for(let i=0;i< y.length;i++){
if(y[i].value.trim()==""){
valid=false;
y[i].classList.add("invalid");
}
}
if(valid){
document.getElementsByClassName("step")[currentTab].classList.add("finish");
//console.log(document.getElementsByClassName("step")[currentTab]);
}
return valid;
}
function fiexIndicator(n){
let x=document.getElementsByClassName("step");
for(let i=0;i< x.length;i++){
x[i].classList.remove("active");
}
x[n].classList.add("active");
}
//remove invalid class
let totalInput=document.querySelectorAll(".tab input");
for(let i=0;i< totalInput.length;i++){
totalInput[i].addEventListener("focus",function(){
totalInput[i].className="";
})
}
//console.log(totalInput);