Я создаю форму в Bootstrap 4, которая разбита на несколько частей с помощью карусели.
То, что я хотел бы сделать, - когда пользователь завершает ввод для каждого раздела, кнопка «следующий» удаляет атрибут disabled
.
Я смог выяснить это для первого слайда,но я не могу понять, как сбросить функцию при переходе к следующему активному слайду.
Я пытаюсь использовать ванильный Javascript. Я также хотел бы, чтобы классы валидации работали для каждого раздела, используя кнопку «Далее», а не «Отправить».
Любая помощь будет высоко ценится. Я все еще работаю, чтобы стать намного лучше в Javascript!
Вот моя скрипка: Карусель с гидом
HTML
<div class="container m-5">
<h1 class="text-center">Guided Form</h1>
<div id="slider1" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators row">
<li class="col-md-4 active" data-target="#carouselExampleIndicators" data-slide-to="0">1</li>
<li class="col-md-4" data-target="#carouselExampleIndicators" data-slide-to="1">2</li>
<li class="col-md-4" data-target="#carouselExampleIndicators" data-slide-to="2">3</li>
</ol>
<div class="row">
<div class="col-md-6 offset-md-3 mt-5">
<div class="carousel-inner" style="height:300px;">
<p id="alert"></p>
<form method="POST" action="" id="guideForm" novalidate="">
<div class="carousel-item active">
<div class="form-group">
<label for="InputFirstName">First Name</label>
<input type="text" class="form-control first-name" id="InputFirstName" aria-describedby="emailHelp" placeholder="First Name" required>
<div class="valid-feedback">Success! You've done it.</div>
<div class="invalid-feedback">No, you missed this one.</div>
</div>
</div>
<div class="carousel-item">
<div class="form-group">
<label for="InputLastName">Last Name</label>
<input type="text" class="form-control" id="InputLastName" aria-describedby="emailHelp" placeholder="Last Name" required>
</div>
</div>
<div class="carousel-item">
<div class="form-group">
<label for="InputEmail">Last Name</label>
<input type="email" class="form-control" id="InputEmail" aria-describedby="emailHelp" placeholder="Email" required>
</div>
<button class="btn btn-primary" type="submit" id="submitBtn">Submit</button>
</div>
</form>
</div>
</div>
</div>
<a class="carousel-control-prev d-none" href="#slider1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<button id="nextBtn" class="carousel-control-next d-none" href="#slider1" role="button" data-slide="next" type="submit" disabled>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
JS
var form = document.querySelector('form .active')
var fn = document.querySelectorAll('.active #InputFirstName')
var required_inputs = document.querySelector('.active #InputFirstName')
var ln = document.querySelectorAll('.active #InputLasttName')
var required_inputs = document.querySelector('.active #InputLastName')
var register = document.querySelector('#nextBtn')
form.addEventListener('keyup', function(e) {
var disabled = false
fn.forEach(function(input, index) {
if (input.value === '' || !input.value.replace(/\s/g, '').length) {
disabled = true
}
})
if (disabled) {
register.setAttribute('disabled', 'disabled')
} else {
register.removeAttribute('disabled')
}
})