test2

by kewan888

HTML

<!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>

CSS

input[type="button"] {
			  cursor: pointer;
			  background-color: rgb(158, 175, 255);
			}

			input[type="submit"] {
			  cursor: pointer;
			  background-color: rgb(255, 188, 188);
			}

JavaScript

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;
  }
}