Controle de formulaire

**enterprise** · 22/06/2018, 11h15

Bonjour à tous,

Désolé de vous déranger avec cette question, car il y a d'autre sujet qui en parle, mais je ne comprend pas!!!
Je veux tout simplement vérifier les champs de mon formulaire, et si ils ne sont pas bon, mon formulaire ne doit pas s'envoyer. Ici mon formulaire s'envoie quand même mais il me dit bien qu'il n'est pas bon...

mon script js:

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
<script type="text/javascript">
 
  function surligne(champ, erreur)
{
   if(erreur)
      champ.style.backgroundColor = "#fba";
   else
      champ.style.backgroundColor = "";
}
 
function verifMail(champ)
{
   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
   if(!regex.test(champ.value))
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}
 
function verifPseudo(champ)
{
   if(champ.value.length < 2 || champ.value.length > 25)
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}
 
function verifForm(f)
{
   var pseudoOk = verifPseudo(f.pseudo);
   var mailOk = verifMail(f.email);
 
 
   if(pseudoOk && mailOk )
      return true;
   else
   {
      alert("Veuillez remplir correctement tous les champs");
      return false;
   }
}
 
</script>

mon formulaire:

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
39
<div>
  <form method="post" action="esp_RH/addUser.php" onsubmit="return verifForm(this)">
      <label><b>identifiant de l'utilisateur</b></label>
      <input type="text" placeholder="Entrer l'identifiant de l'utilisateur" name="username" onblur="verifPseudo(this)" required>
 
      <label><b>Mot de passe</b></label>
      <input type="password" placeholder="Entrer le mot de passe" name="password" required>
 
      <label><b>Confirmer le mot de passe</b></label>
      <input type="password" placeholder="Entrer le mot de passe" name="password2" required>
 
      <label><b>Nom de l'utilisateur</b></label>
      <input type="text" placeholder="Entrer le nom de l'utilisateur" name="firstname" required>
 
      <label><b>Prénom de l'utilisateur</b></label>
      <input type="text" placeholder="Entrer le prénom de l'utilisateur" name="lastname" required>
 
      <label><b>Adresse mail</b></label>
      <input type="text" placeholder="exemple@mail.fr" name="email" onblur="verifMail(this)" />
 
 
     <label for="status"><b>Quel est le statut de l'employé ?</b></label><br />
     <select name="status" id="statut">
         <option value="2">Employé</option>
         <option value="3">RH</option>
         <option value="1">Manager</option>
     </select>
 
      <input type="submit" value="Envoyer" />
 
  <?php
  if(isset($_GET['erreur'])){
      $err = $_GET['erreur'];
      if($err==1 || $err==2)
          echo "<p style='color:red'>ce n'est pas bon</p>";
    }
  ?>
  </form>
</div>

**eleydet** · 22/06/2018, 12h47

Bonjour,

Le code ci-dessous est un exemple de contrôle de formulaire en JS. Il devrait fonctionner, mais je ne l'ai pas testé.

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function verifier() {
        L=document.getElementById("longueur").value;
        l=document.getElementById("largeur").value;
        L=L*1;
        l=l*1;
        if (l>L) alert("La longueur est inférieure à la largeur!");
        else document.getElementById("formulaire").submit();
      }
    </script>
  </head>
  <body>
    <p>Entrez les dimensions d'un rectangle :</p>
    <form method="post" action="resultat.php" id="formulaire">
      <p>Longueur = <input type="text" id="longueur"> m</p>
      <p>Largeur = <input type="text" id="largeur"> m</p>
      <p><input type="button" value="VALIDER" onclick="verifier();"></p>
    </form>
  </body>
</html>

**enterprise** · 22/06/2018, 14h16

Mais c'est parfait ça! Merci beaucoup.
c'était donc le submit le problème.

**eleydet** · 22/06/2018, 21h39

Bonsoir,

Je viens de tester l'exemple que je proposais il y a quelques heures... Il ne marche pas. Pour qu'il fonctionne, il faut ajouter l'attribut name aux balises input.

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
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function verifier() {
        L=document.getElementById("longueur").value;
        l=document.getElementById("largeur").value;
        L=L*1;
        l=l*1;
        if (l>L) alert("La longueur est inférieure à la largeur!");
        else document.getElementById("formulaire").submit();
      }
    </script>
  </head>
  <body>
    <p>Entrez les dimensions d'un rectangle :</p>
    <form method="post" action="resultat.php" id="formulaire">
      <p>Longueur = <input type="text" id="longueur" name="longueur"> m</p>
      <p>Largeur = <input type="text" id="largeur" name="largeur"> m</p>
      <p><input type="button" value="VALIDER" onclick="verifier();"></p>
    </form>
  </body>
</html>