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 id="erreur"></div>
    <form method="post" onsubmit="return controlValidation()" id="formulaire">
      <p id="utilisateur1">Utilisateur 1 : NOM <input type="text" name="nom[]" /> Prénom <input type="text" name="prenom[]" /></p>
      <p id="utilisateur2">Utilisateur 2 : NOM <input type="text" name="nom[]" /> Prénom <input type="text" name="prenom[]" /></p>
      <p id="utilisateur3">Utilisateur 3 : NOM <input type="text" name="nom[]" /> Prénom <input type="text" name="prenom[]" /></p>
      <div id="nouvelUtilisateur"></div>
      <p id="ajouterUtilisateur">
        <input type="button" name="buttonAjouterUtilisateur" id="buttonAjouterUtilisateur" value="Ajouter un utilisateur" onClick="ajouterUtilisateur(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="nom[]" />
									Prénom <input type="text" name="prenom[]" />`

  document.getElementById('ajouterUtilisateur').innerHTML = '<input type="button" name="buttonAjouterUtilisateur" id="buttonAjouterUtilisateur" value="Ajouter un utilisateur" onClick="ajouterUtilisateur(' + numUtilisateurSuivant + ')" />';
}

function controlValidation() {

  let msg = ['Il manque :<br><br>'];

  for (let i = 1; i <= 3; i++) {

    let nom = formulaire.elements['nom' + i].value;
    let prenom = formulaire.elements['prenom' + i].value;

    if (nom != "" || prenom != "") {

      if (nom == "") {
        msg += "Le NOM " + i + ".<br />";
      }

      if (prenom == "") {
        msg += "Le prénom " + i + ".<br />";
      }

    }
  }

  if (msg.length > 1) {
    document.getElementById("erreur").innerHTML = msg;
    return false;
  } else {
    return true;
  }
}