I've got some kind of "step form" with nav tabs and button navigation between tabs. I want to prevent the tabs from changing to the next one if the user has not completed the required inputs of the current tab. How can I make the current tab button to validate the form by using the bootstrap 4 validator? I've tried with multiple form submit inputs but it doesn't work
//BUTTON NAVIGATION BETWEEN TABS
$('.next').click(function () {
$('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
});
$('.previous').click(function () {
$('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});
// BOOTSTRAP FORM VALIDATION
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-6">
<br>
<br>
<br>
<ul class="nav nav-tabs text-center" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link" id="step1-tab" data-toggle="tab" href="#step1" role="tab" aria-controls="step1" aria-selected="false">Step 1</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="step2-tab" data-toggle="tab" href="#step2" role="tab" aria-controls="step2" aria-selected="false">Step 2</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="step3-tab" data-toggle="tab" href="#step3" role="tab" aria-controls="step3" aria-selected="false">Step 2</a>
</li>
</ul>
<form action="" class="needs-validation" novalidate>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="step1" role="tabpanel" aria-labelledby="step1-tab">
<br>
<label for="input1">INPUT 1</label>
<input type="text" class="form-control" id="input1" required>
<div class="invalid-feedback">REQUIRED FIELD</div>
<button class="btn btn-lg next">Next</button>
</div>
<div class="tab-pane fade" id="step2" role="tabpanel" aria-labelledby="step2-tab">
<br>
<label for="input2">INPUT 2</label>
<input type="text" class="form-control" id="input2" required>
<div class="invalid-feedback">REQUIRED FIELD</div>
<button class="btn btn-lg back">Back</button>
<button class="btn btn-lg next">Next</button>
</div>
<div class="tab-pane fade" id="step3" role="tabpanel" aria-labelledby="step3-tab">
<br>
<label for="input3">INPUT 3</label>
<input type="text" class="form-control" id="input3" required>
<div class="invalid-feedback">REQUIRED FIELD</div>
<button class="btn btn-lg back">Back</button>
<button type="submit" class="btn btn-lg">Submit</button>
</div>
</div>
</form>
</div>
<div class="col-lg-2"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>