Controle de formulaire

Version imprimable

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:

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:

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>

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:

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>

22/06/2018, 14h16
enterprise

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

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:

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>

25/06/2018, 09h31
enterprise

Ah bon? bah écoute chez moi ça marchait super bien! :mouarf:

Je ne comprends pas pourquoi rajouter un, puisque on fait un getelement byID
25/06/2018, 18h39
eleydet

Bonsoir,

Ainsi qu'il est stipulé sur le site (vers la fin de la page) :
https://developer.mozilla.org/fr/doc...ormulaire_HTML

Citation:

Pour nommer vos données vous devez utiliser l'attribut name pour identifier bien précisément l'élément d'information collecté