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

**kewan** · 02/11/2022, 17h44

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.

**mathieu** · 02/11/2022, 19h41

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

**Gobble** · 02/11/2022, 19h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**kewan** · 02/11/2022, 22h18

Merci pour vos réponses.

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager