test1

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>Utilisateur 1 : NOM <input type="text" name="nom1" /> Prénom <input type="text" name="prenom1" /></p>
      <p>Utilisateur 2 : NOM <input type="text" name="nom2" /> Prénom <input type="text" name="prenom2" /></p>
      <p>Utilisateur 3 : NOM <input type="text" name="nom3" /> Prénom <input type="text" name="prenom3" /></p>
      <p><input type="submit" name="subFormulaire" id="subFormulaire" value="Envoyer le formulaire" /></p>
    </form>
    <script type="text/javascript" src="test.js"></script>
  </body>

</html>

CSS

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

JavaScript

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 += "<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;
  }
}