Validation d'un formulaire après modification du DOM par l'utilisateur

Version imprimable

02/11/2022, 17h44
kewan

Validation d'un formulaire après modification du DOM par l'utilisateur
Salut tout le forum, j'ai besoin de votre aide.

Je souhaite valider un formulaire après que l'utilisateur l'ait modifié.

Voilà un exemple de mon formulaire actuellement => https://jsfiddle.net/kewan888/hLwz8nep/8/

L'utilisateur peut renseigner maximum 3 nouvels utilisateurs.
En JavaScript, je vérifie que s'il a renseigné un NOM ou un prénom, il est a bien renseigné la ligne entière.

Maintenant, je souhaite refaire mon formulaire pour que l'utilisateur pour ajouter plus de 3 nouvels utilisateurs en modifiant le DOM au niveau formulaire.

Voilà un exemple de ce que je souhaite faire => https://jsfiddle.net/kewan888/an0sjw3z/7
- Je ne suis pas sûr d'utiliser la bonne méthode pour modifier le DOM.
- Et je ne sais pas comment vérifier que l'utilisateur a bien complété le NOM et le Prénom de chaque nouvel utilisateur.
Merci pour votre aide.

Kewan.
02/11/2022, 19h41
mathieu

je pense que le plus simple est de rajouter une classe css à toutes les lignes de saisie.
vous pourrez ensuite accéder à toutes les lignes avec "getElementsByClassName"
https://developer.mozilla.org/fr/doc...ntsByClassName

Etape 1 ajouter un bouton d'insertion de nouvelle ligne qui appliquera une fonction chargée d'insérer un nouvel input dans la page (ou form sera le wrapper des inputs)
Code:

1 2 3 4 5 6 7 8 function addInputToForm(){ const form = document.getElementById('form'); var input = document.createElement("input"); input.type = "text"; input.className = "input-super-class"; // set the CSS class form.appendChild(input); // put it into the DOM }
Etape 2 Une fois l'ensemble des input réalisé, l'utilisateur clique sur valider et il faudra alors parcourir l'array des input et checker si les valeurs sont remplis et ok. Pense aussi a mettre un bouton remove input ou ignorer les input a valeur vide.

Grossièrement avec quelque chose comme ça :
Code:

1 2 3 4 5 6 7 8 const form = document.getElementById('form'); console.log(form.elements); // donne accès a tous les éléements du form. [...form.elements].forEach((item) => { console.log(item); // accès a chaque élement du formulaire });
Ou simplement boucler sur l'array des input récupéré avec la méthode document.getElementsByClassName("myInputclass");
Code:

1 2 3 4 5 const inputs = document.getElementsByClassName("input-super-class"); Array.from(inputs).forEach(input) => { console.log(input.tagName); // accès a chaque élement du formulaire et valeurs });
Bon code

Merci pour vos réponses.

J'ai fait évoluer mon code => https://jsfiddle.net/kewan888/an0sjw3z/24/

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="fr">
 
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
  </head>
 
  <body>
    <div>
      <ol id="erreur"></ol>
    </div>
    <form method="post" onsubmit="return controlValidation()" id="formulaire">
      <p id="utilisateur1">
        Utilisateur 1 : NOM <input type="text" name="nomUtilisateur1" id="nomUtilisateur1" />
        Prénom <input type="text" name="prenomUtilisateur1" id="prenomUtilisateur1" />
      </p>
      <p id="utilisateur2">
        Utilisateur 2 : NOM <input type="text" name="nomUtilisateur2" id="nomUtilisateur2" />
        Prénom <input type="text" name="prenomUtilisateur2" id="prenomUtilisateur2" />
      </p>
      <p id="utilisateur3">
        Utilisateur 3 : NOM <input type="text" name="nomUtilisateur3" id="nomUtilisateur3" />
        Prénom <input type="text" name="prenomUtilisateur3" id="prenomUtilisateur3" />
      </p>
      <div id="nouvelUtilisateur"></div>
      <p id="ajouterUtilisateur">
        <input type="button" name="buttonAjouterUtilisateur" id="buttonAjouterUtilisateur" value="Ajouter un utilisateur" onClick="ajouterUtilisateur(3)" />
        <input type="hidden" name="nbrUtilisateur" id="nbrUtilisateur" value="3" />
      </p>
      <p><input type="submit" name="subFormulaire" id="subFormulaire" value="Envoyer le formulaire" /></p>
    </form>
    <script type="text/javascript" src="test2.js"></script>
  </body>
 
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
function ajouterUtilisateur(numUtilisateur) {
 
  // console.log("Passage ajouterUtilisateur");
 
  let nouveauUtilisateurP = document.createElement("p");
  let numUtilisateurSuivant = numUtilisateur + 1;
 
  document
    .getElementById("nouvelUtilisateur")
    .appendChild(nouveauUtilisateurP)
    .setAttribute("id", "utilisateur" + numUtilisateurSuivant);
 
  const nouveauUtilisateur = document.getElementById("utilisateur" + numUtilisateurSuivant);
  nouveauUtilisateur.innerHTML =
    `Utilisateur ` + numUtilisateurSuivant + ` :
		NOM <input type="text" name="nomUtilisateur` + numUtilisateurSuivant + `" id="nomUtilisateur` + numUtilisateurSuivant + `" />
		Prénom <input type="text" name="prenomUtilisateur` + numUtilisateurSuivant + `" id="prenomUtilisateur` + numUtilisateurSuivant + `"/>`
 
  document.getElementById('buttonAjouterUtilisateur').setAttribute("onClick", "ajouterUtilisateur(" + numUtilisateurSuivant + ")");
 
  document.getElementById('nbrUtilisateur').setAttribute("value", numUtilisateurSuivant);
}
 
function controlValidation() {
 
  // console.log("Passage controlValidation");
 
  let msg = ['Il manque :<br><br>'];
 
  let nbrUtilisateur = formulaire.elements['nbrUtilisateur'].value;
 
  // console.log("nbrUtilisateur : " + nbrUtilisateur);
 
  for (let i = 1; i <= nbrUtilisateur; i++) {
 
    let nom = formulaire.elements['nomUtilisateur' + i].value;
    let prenom = formulaire.elements['prenomUtilisateur' + i].value;
 
    if (nom != "" || prenom != "") {
 
      if (nom == "") {
        msg += "<li>Le NOM de l'utilisateur " + i + "</li>";
      }
 
      if (prenom == "") {
        msg += "<li>Le prénom de l'utilisateur " + i + "</li>";
      }
 
    }
  }
 
  if (msg.length > 1) {
    document.getElementById("erreur").innerHTML = msg;
    return false;
  } else {
    return true;
  }
}

J'utilise un input type="hidden" pour connaitre le nombre d'utilisateurs envoyés.