Как сбросить функцию по «клику» с помощью карусели Bootstrap 4 - PullRequest
1 голос
/ 23 октября 2019

Я создаю форму в 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')

    }
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...