Formulaire multi-pages / validation des champs
Résolu
PJ47
Messages postés
77
Date d'inscription
jeudi 2 mars 2023
Statut
Membre
Dernière intervention
27 février 2024
-
Modifié le 26 févr. 2024 à 16:13
PJ47 Messages postés 77 Date d'inscription jeudi 2 mars 2023 Statut Membre Dernière intervention 27 février 2024 - 27 févr. 2024 à 09:39
PJ47 Messages postés 77 Date d'inscription jeudi 2 mars 2023 Statut Membre Dernière intervention 27 février 2024 - 27 févr. 2024 à 09:39
A voir également:
- Formulaire multi-pages / validation des champs
- Supprimer des pages sur word - Guide
- Formulaire de réclamation facebook - Guide
- Excel validation des données liste - Guide
- Multi exp heartgold - Forum Jeux vidéo
1 réponse
PJ47
Messages postés
77
Date d'inscription
jeudi 2 mars 2023
Statut
Membre
Dernière intervention
27 février 2024
1
27 févr. 2024 à 09:39
27 févr. 2024 à 09:39
Bonjour @tous,
j'ai constaté que mon dernier post à été résolu par un BOBot- Donc comme ce post n'avais pas l'air d'inspiré non plus j'ai tenté l'approche Chat GPT (version gratuite !)
il m'a, après plusieurs heures de discutions, apporté la solution suivante :
<script>
document.addEventListener("DOMContentLoaded", function () {
const pages = document.querySelectorAll(".page");
const header = document.querySelector("header");
const nbPages = pages.length;
let pageActive = 1;
window.onload = () => {
const premierePage = document.querySelector(".page");
premierePage.style.display = "initial";
premierePage.classList.add("active");
pages.forEach((page, index) => {
let element = document.createElement("div");
element.classList.add("page-num");
element.id = "num" + (index + 1);
if (pageActive === index + 1) {
element.classList.add("active");
}
element.innerHTML = index + 1;
header.appendChild(element);
});
let boutonsSuivants = document.querySelectorAll(".next");
let boutonsPrecedents = document.querySelectorAll(".prev");
boutonsSuivants.forEach(bouton => {
bouton.addEventListener("click", () => pageSuivante(bouton));
});
boutonsPrecedents.forEach(bouton => {
bouton.addEventListener("click", pagePrecedente);
});
};
function getAllRequiredFieldsBeforePage(page) {
const indexPage = Array.from(pages).indexOf(page);
const champsObligatoiresPagesPrecedentes = [];
for (let i = 0; i < indexPage; i++) {
const champsObligatoires = pages[i].querySelectorAll("[required]");
champsObligatoires.forEach(champ => {
champsObligatoiresPagesPrecedentes.push(champ);
});
}
return champsObligatoiresPagesPrecedentes;
}
function pageSuivante(bouton) {
const pageCourante = document.querySelector(".page.active");
const champsObligatoiresPageCourante = pageCourante.querySelectorAll("[required]");
let tousChampsPageCouranteRemplis = true;
champsObligatoiresPageCourante.forEach(champ => {
if (champ.tagName.toLowerCase() === "select" && champ.selectedIndex === 0) {
tousChampsPageCouranteRemplis = false;
alert("Veuillez sélectionner une option dans la liste déroulante avant de passer à la page suivante.");
} else if (!champ.value.trim()) {
tousChampsPageCouranteRemplis = false;
alert("Veuillez remplir tous les champs obligatoires avant de passer à la page suivante.");
}
});
if (tousChampsPageCouranteRemplis) {
const nouvellePage = bouton.parentElement.nextElementSibling;
if (nouvellePage) {
const champsObligatoiresPagesPrecedentes = getAllRequiredFieldsBeforePage(nouvellePage);
let tousChampsPagesPrecedentesRemplis = true;
champsObligatoiresPagesPrecedentes.forEach(champ => {
if (champ.tagName.toLowerCase() === "select" && champ.selectedIndex === 0) {
tousChampsPagesPrecedentesRemplis = false;
} else if (!champ.value.trim()) {
tousChampsPagesPrecedentesRemplis = false;
}
});
if (tousChampsPagesPrecedentesRemplis) {
pages.forEach(page => page.style.display = "none");
nouvellePage.style.display = "initial";
document.querySelector(".active").classList.remove("active");
pageActive++;
document.querySelector("#num" + pageActive).classList.add("active");
} else {
alert("Veuillez remplir tous les champs obligatoires des pages précédentes avant de passer à la page suivante.");
}
}
}
}
function pagePrecedente() {
pages.forEach(page => page.style.display = "none");
this.parentElement.previousElementSibling.style.display = "initial";
document.querySelector(".active").classList.remove("active");
pageActive--;
document.querySelector("#num" + pageActive).classList.add("active");
}
});
</script>
cela semble fonctionné correctement- vu que je n'ai pas de connaissance en javascript, je ne suis donc pas capable d'améliorer simplifier ce code si nécessaire mais cela m'apporte la solution à mon pb.
cool je résous mon pb dommage que ce soit avec un robot (il parait que c'est l'avenir !!)
je clôture donc le sujet pour ne pas encombrer .
bonne journée
J