使用表单元素外部的按钮进行多步骤表单验证

Question

我正在尝试使用引导程序4创建带有验证的多步骤表单。我发现了如何在表单中包含按钮的同时创建表单。但是我想做的是在表单元素（位于固定的div底部）中创建一个带有验证和按钮的多步骤表单。我用笔解释了=> Codepen

我使用按钮移动的方式不是最好的，但是我不知道如何构建它。如果有人可以指导我，那将不胜感激！

这是html：

<!-- **************************************************** -->
<!-- *************** FIRST SCREEN FORM ***************** -->
<!-- **************************************************** -->
<fieldset class="active">
  <div class="container main section1">
    <h2 class="mb-5">Section 1</h2>
    <form class="needs-validation" id="form1">
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputCp1">Lorem *</label>
          <input type="text" class="form-control" id="inputCp1" required="required" placeholder="Ex. loremipsum">
        </div>
        <div class="form-group col-md-6">
          <label for="inputCity">Lorem *</label>
          <select id="inputCity" class="form-control">
            <option selected>Select...</option>
            <option>loremipsum</option>
          </select>
        </div>
      </div>
    </form>
  </div>
</fieldset>
<!-- **************************************************** -->
<!-- *************** SECOND SCREEN FORM ***************** -->
<!-- **************************************************** -->
<fieldset>
<div class="container main section1">
    <h2 class="mb-5">Section 2</h2>
    <form class="needs-validation" id="form1">
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputCp2">Lorem *</label>
          <input type="text" class="form-control" id="inputCp2" required="required" placeholder="Ex. loremipsum">
        </div>
        <div class="form-group col-md-6">
          <label for="inputCp3">Lorem *</label>
          <input type="text" class="form-control" id="inputCp3" required="required" placeholder="Ex. loremipsum">
        </div>
      </div>
    </form>
  </div>
</fieldset>
<!-- **************************************************** -->
<!-- *************** THIRD SCREEN FORM ***************** -->
<!-- **************************************************** -->
<fieldset>
<div class="container main section1">
    <h2 class="mb-5">Section 3</h2>
    <form class="needs-validation" id="form1">
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputCp4">Lorem *</label>
          <input type="text" class="form-control" id="inputCp4" required="required" placeholder="Ex. loremipsum">
        </div>
        <div class="form-group col-md-6">
          <label for="inputCp5">Lorem *</label>
          <input type="text" class="form-control" id="inputCp5" required="required" placeholder="Ex. loremipsum">
        </div>
      </div>
    </form>
  </div>
</fieldset>
<!-- **************************************************** -->
<!-- *************** FOURTH SCREEN FORM ***************** -->
<!-- **************************************************** -->
<fieldset>
<div class="container main section1">
    <h2 class="mb-5">Section 4</h2>
    <form class="needs-validation" id="form1">
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputCp6">Lorem *</label>
          <input type="text" class="form-control" id="inputCp6" required="required" placeholder="Ex. loremipsum">
        </div>
        <div class="form-group col-md-6">
          <label for="inputCity2">Lorem *</label>
          <select id="inputCity2" class="form-control">
            <option selected>Select...</option>
            <option>loremipsum</option>
          </select>
        </div>
      </div>
    </form>
  </div>
</fieldset>



<!-- **************************************************** -->
<!-- *************** THANK YOU SCREEN ******************* -->
<!-- **************************************************** -->

<fieldset>
    <div class="container main section4">
        <h2 class="mb-5">THE END!</h2>
    </div>
</fieldset>

<!-- **************************************************** -->
<!-- *************** BOTTOM NAVIGATION ***************** -->
<!-- **************************************************** -->

<div class="container-fluid navbar">
  <div class="container">
    <div class="row">
      <div class="col">
        <button class="btn btn-secondary btn-lg btn-prev hidden">Retour</button>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <button type="submit" class="btn btn-primary btn-lg btn-next">Suivant</button>
      </div>
    </div>
  </div>
</div>

这是凌乱的初学者JS：

$( document ).ready(function() {
    let clickCount = 0;
    $('.btn-next').click(function() {
        // $('fieldset.active').removeClass('active')
        // .next('fieldset').addClass('active');     
        if ( clickCount <= 3 ){
            clickCount += 1;
            console.log(clickCount);
        }
        if( clickCount >= 1 && clickCount <= 3 ){
            $('.btn-prev').removeClass("hidden");
            $('fieldset.active').removeClass('active')
            .next('fieldset').addClass('active');
        }
        if( clickCount >= 4 ){
            $('fieldset.active').removeClass('active')
            .next('fieldset').addClass('active');
            $('.navbar').addClass("hidden");
        }
    });

    $('.btn-prev').click(function() {
        $('fieldset.active').removeClass('active')
        .prev('fieldset').addClass('active');
        // if(clickCount > 0)
        clickCount -= 1;
        console.log(clickCount);
        if(clickCount < 1){
            $('.btn-prev').addClass("hidden");
        }
    });


    // Toggle animation for Cards
    $(".card").click(function(){
        $('.card').not(this).each(function(){
               $(this).removeClass("card-active");
               $('.card-img-top').css({ fill: "#ff0000" });
           });
           $(this).addClass("card-active");
    });

    // Toggle animation for Classe Energie
    $("div.ce").click(function(){
     $('div.ce').not(this).each(function(){
            $(this).removeClass("ce-active");
        });
        $(this).addClass("ce-active");
    });

    // Toggle animation for GES
    $("div.ge").click(function(){
        $('div.ge').not(this).each(function(){
               $(this).removeClass("ge-active");
           });
           $(this).addClass("ge-active");
       });



});

感谢帮助人员！