CODEWITHSUNDEEP
javascriptformsalerts
pepitoo999
pepitoo999

Reputation: 33

How can I do alert when form isn't complete

I'm actually in my computer class and I have a work that I can't understand. I have a scroll form in my HTML page and a function that says if the form is completed or not but now I need to create an alert but the condition of if the form is complete stay everytime true. Heres my html:

<html> 
    <head> 
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styles.css" />
        <script type="text/javascript" src="./ScriptListeDeroulante.js"></script>
        <title>Formulaire</title>
    </head> 
    <body>  
        <h1>Formulaire avec une liste déroulante</h1>
        <form action="http://www.cyberlycee.fr/NSI/Resultat_Fiche.php" method="post">
            <div class="entree">
                <label>Sélectionner votre classe : 
                    <select name="LaClasse">';
                        <option value="">Sélectionner</option>';
                        <option value="709">Classe 709</option>';
                        <option value="710">Classe 710</option>';
                    </select>
                </label>
                <span id="AlerteLaClasse" class="Alerte"></span>
            </div>
            
            <div><input type="button" name="bouton" value="Envoyer" onclick="VerifierFormulaire(this.form)"></div>
            
        </form>
    </body>
</html>

And here's my JS :

function AfficherMessage(formulaire){
    let valide=true;
    if(formulaire.LaClasse.value==='700') {
        document.getElementById("AlerteLaClasse").textContent = " Vous avez sélectionnez la 700 !";
        valide=false;
    }
    else document.getElementById("AlerteLaClasse").textContent = "";
    
    return valide;
}

function VerifierFormulaire(formulaire){
    // cette fonction vérifie le formulaire puis le soumet si OK
    let ok = AfficherMessage(formulaire);
    //let ok = false;
    if (ok) formulaire.submit();
    else alert("Le formulaire n'est pas complet");
}

Upvotes: 1

Views: 933

Answers (2)

kiranvj
kiranvj

Reputation: 34117

Your code is working fine. Please check below. I have some additional alerts. Your select didnt have 700 as a value, so I added one, select that and check.

function AfficherMessage(formulaire) {
  let valide = true;
  if (formulaire.LaClasse.value === '700') {
  alert('Selected 700');
    document.getElementById("AlerteLaClasse").textContent = " Vous avez sélectionnez la 700 !";
    valide = false;
  } else {
  alert('Did not select 700');
  document.getElementById("AlerteLaClasse").textContent = "";
}
  return valide;
}

function VerifierFormulaire(formulaire) {
  // cette fonction vérifie le formulaire puis le soumet si OK
  let ok = AfficherMessage(formulaire);
  //let ok = false;
  if (ok) formulaire.submit();
  else alert("Le formulaire n'est pas complet");
}
<html>

<head>
  <meta charset="utf-8" />
  <title>Formulaire</title>
</head>

<body>
  <h1>Formulaire avec une liste déroulante</h1>
  <form action="http://www.cyberlycee.fr/NSI/Resultat_Fiche.php" method="post">
    <div class="entree">
      <label>Sélectionner votre classe : 
                    <select name="LaClasse">';
                        <option value="">Sélectionner</option>';
                        <option value="709">Classe 709</option>';
                        <option value="710">Classe 710</option>';
                         <option value="700">Classe 700</option>';
                    </select>
                </label>
      <span id="AlerteLaClasse" class="Alerte"></span>
    </div>

    <div><input type="button" name="bouton" value="Envoyer" onclick="VerifierFormulaire(this.form)"></div>

  </form>
</body>

</html>

Upvotes: 1

krismans
krismans

Reputation: 88

  1. You are missing opening parenthesis after else.
  2. This is maybe just a suggestion, but I would set valide to false at the beginning, because at the beginning you don`t know if the form is valid.

Upvotes: 0

Related Questions