Multi-Step Form Required Fields To Go to Next Step

Question

I'm trying to merge two codes for several days now without success. Is there someone who can help me with that please ? I'm a total beginner with web developpment, i'm sorry if it's a mess. It's all copy-paste essentially. The first part of the javascript is working with no issues, the second part of it has to be "added" to the first one.

/* Multistep code */

const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");

let formStepsNum=0;

nextBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
      formStepsNum++;
      updateFormSteps();
      updateProgressbar();
    });
  });
  
  prevBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
      formStepsNum--;
      updateFormSteps();
      updateProgressbar();
    });
  });
  
  function updateFormSteps() {
    formSteps.forEach((formStep) => {
      formStep.classList.contains("form-step-active") &&
        formStep.classList.remove("form-step-active");
    });
  
    formSteps[formStepsNum].classList.add("form-step-active");
  }
  
  function updateProgressbar() {
    progressSteps.forEach((progressStep, idx) => {
      if (idx < formStepsNum + 1) {
        progressStep.classList.add("progress-step-active");
      } else {
        progressStep.classList.remove("progress-step-active");
      }
    });
  
    const progressActive = document.querySelectorAll(".progress-step-active");
  
    progress.style.width =
      ((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
  }

/*Validation code*/

$(document).ready(function(){
$(".btn-next").click(function(){
    var form = $("#register-user");
    form.validate({
      errorElement: 'span',
      errorClass: 'help-block',
      highlight: function(element, errorClass, validClass) {
        $(element).closest('.input-group').addClass("has-error");
      },
      unhighlight: function(element, errorClass, validClass) {
        $(element).closest('.input-group').removeClass("has-error");
      },
      rules: {
        first_name: {
          required: true,
          minlength: 3,
        },
        last_name: {
          required: true,
          minlength: 3,
        },
        user_login: {
          required: true,
        },
        user_pass: {
          required: true,
        },
        user_pass2: {
          required: true,
          equalTo: '#user_pass',
        },
        user_email: {
          required: true,
        },
        
      },      
      messages: {
        first_name: {
          required: "First name required",
        },
        last_name: {
            required: "Last name required",
        },
        user_login: {
            required: "Username required",
        },
        user_pass: {
          required: "Password required",
        },
        user_pass2: {
          required: "Password required",
          equalTo: "Password don't match",
        },
        user_email: {
          required: "Email required",
        },
      }
    });


if (form.valid() === true){
}})});

<form name="myForm" action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post" class="form" id="register-user">
<!-- progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
    <div class="progress-step progress-step-active" data-title="Intro"></div>
    <div class="progress-step" data-title="contract"></div>
    <div class="progress-step" data-title="ID"></div>
    <div class="progress-step" data-title="Password"></div>
</div>
<!-- steps -->
<div class="form-step form-step-active">
        <div class="input-group">
            <input type="text" name="first_name" id="first_name" placeholder='Prenom' required>
        </div>
        <div class="input-group">
            <input type="text" name="last_name" id="last_name" placeholder='Nom' required>
        </div>
        <div class="input-group">
            <input type="text" value= "<?php echo isset($_POST['user_login']) ? $_POST['user_login'] : ''?>" name="user_login" id="user_login" placeholder="Nom d'utilisateur" required>
        </div>


    <div class="">
        <a href="#Step2" class="btn btn-next width-50 ml-auto">Suivant</a>
    </div>
</div>  
<div class="form-step">
    <div class="container">
        <div class="input-group">
            <input type="radio" name="occupation" id="reg_nurse" value="Registered Nurse" required>
            <label for="reg_nurse">Registered Nurse</label>
        </div>

        <div class="input-group">
            <input type="radio" name="occupation" id="prac_nurse" value="Practical Nurse" required>
            <label for="prac_nurse">Practical Nurse</label>
        </div>

        <div class="input-group">
            <input type="radio" name="occupation" id="nurse_prac" value="Nurse Practioner" required>
            <label for="nurse_prac">Nurse Practioner</label>
        </div>

        <div class="input-group">
            <input type="radio" name="occupation" id="midwife" value="Midwife" required>
            <label for="midwife">Midwife</label>
        </div>

        <div class="input-group">
            <input type="radio" name="occupation" id="reg_nurse_anes" value="Registered Nurse Anesthetist" required>
            <label for="reg_nurse_anes">Registered Nurse Anesthetist</label>
        </div>

        <div class="input-group">
            <input type="radio" name="occupation" id="nurse_spec" value="Nurse Specialist" required> 
            <label for="nurse_spec">Nurse Specialist</label>
        </div>

    </div>
        <div class="btns-group">
            <a href="#Step1" class="btn btn-prev">Précédent</a>
            <a href="#Step3" class="btn btn-next">Suivant</a>
        </div>
</div>
        
<div class="form-step">
    <div class="container2">

        <div class="input-group">
            <input type="radio" name="contract" id="trav_cont" value="Travel Contact" required>
            <label for="trav_cont">Travel Contact</label>
        </div>

        <div class="input-group">
            <input type="radio" name="contract" id="FT_staf_pot" value="Full-time Staff Position" required>
            <label for="FT_staf_pot">Full-time Staff Position</label>
        </div>

        <div class="input-group">
            <input type="radio" name="contract" id="PT_staf_pot" value="Part-time Staff Position" required>
            <label for="PT_staf_pot">Part-time Staff Position</label>
        </div>

        <div class="input-group">
            <input type="radio" name="contract" id="not_work" value="Not Working" required>
            <label for="not_work">Not Working</label>
        </div>
    </div>

        <div class="btns-group">
            <a href="#Step2" class="btn btn-prev">Précédent</a>
            <a href="#Step4" class="btn btn-next">Suivant</a>
        </div>
</div>
        
<div class="form-step">
        <div class="input-group">
            <input type="email" value= "<?php echo isset($_POST['user_email']) ? $_POST['user_email'] : ''?>" name="user_email" id="user_email" placeholder='Votre email' required>
        </div>

        <div class="input-group">
            <input type="password" name="user_pass" id="user_pass" placeholder='Votre mot de passe' required>
        </div>

        <div class="input-group">   
            <input type="password" name="user_pass2" id="user_pass2" placeholder='Confirmez votre mot de passe' required>
        </div>

        <div class="btns-group">
            <a href="#Step3" class="btn btn-prev">Précédent</a>
            <input classe="btnsub" value="Inscription" type="submit" style="padding: 0.75rem; display: block; text-decoration: none; background-color: #5ecfb6; color: rgb(41, 41, 41); text-align: center; border-radius: 25px; cursor: pointer; transition: 0.3s; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 100; border: none;"/>
        </div>
    </div>
</form>