I have the code ready, but it only allows me to advance the step if all the inputs are filled, how could it be done to ignore some inputs and move on?
Follow the code
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == x.length - 1) {
document.getElementById("nextBtn").innerHTML = "Cadastrar";
} else {
document.getElementById("nextBtn").innerHTML = "Próximo";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n);
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x,
y,
i,
valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i,
x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}
#regForm {
background-color: #ffffff;
margin: 100px auto;
padding: 40px;
width: 70%;
min-width: 300px;
}
input {
padding: 10px;
width: 100%;
font-size: 16px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
input.invalid {
background-color: #fcb8b8;
}
.tab {
display: none;
}
.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: #4CAF50;
}
<form id="regForm" action="">
<div class="tab"><b>Dados da Empresa</b>
<div class="row">
<div class="col-md-6">
<p><br><input placeholder="Empresa*" oninput="this.className = ''"></p>
</div>
<div class="col-md-6">
<p><br><input placeholder="CNPJ*" oninput="this.className = ''"></p>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p><br><input placeholder="Endereço*" oninput="this.className = ''"></p>
</div>
<div class="col-md-4">
<p><br><input placeholder="Complemento" oninput="this.className = ''"></p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p><br><input placeholder="Bairro*" oninput="this.className = ''"></p>
</div>
<div class="col-md-3">
<p><br><input placeholder="Cidade*" oninput="this.className = ''"></p>
</div>
<div class="col-md-3">
<p><br><input placeholder="UF*" oninput="this.className = ''"></p>
</div>
<div class="col-md-3">
<p><br><input placeholder="CEP*" oninput="this.className = ''"></p>
</div>
</div>
</div>
<div class="tab"><b>Contato / Redes Sociais*</b>
<div class="row">
<div class="col-md-4">
<p><br><input placeholder="Telefone*"></p>
</div>
<div class="col-md-4">
<p><br><input placeholder="Email*" oninput="this.className = ''"></p>
</div>
<div class="col-md-4">
<p><br><input placeholder="Website" oninput="this.className = ''"></p>
</div>
</div>
</div>
<div class="tab">Birthday:
<p><input placeholder="dd" oninput="this.className = ''"></p>
<p><input placeholder="mm" oninput="this.className = ''"></p>
<p><input placeholder="yyyy" oninput="this.className = ''"></p>
</div>
<div class="tab">Login Info:
<p><input placeholder="Username..." oninput="this.className = ''"></p>
<p><input placeholder="Password..." oninput="this.className = ''"></p>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button class="btn btn-raised btn-danger" type="button" id="prevBtn" onclick="nextPrev(-1)">Voltar</button>
<button class="btn btn-raised btn-danger" type="button" id="nextBtn" onclick="nextPrev(1)">Próximo</button>
</div>
</div>
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>