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"/>
</div>
</div>
</form>