Contrôle de la saisie d'un formulaire

Version imprimable

07/09/2006, 13h29
beegees

Contrôle de la saisie d'un formulaire

Bonjour tout le monde,

J'ai récupéré sur internet un script (javascript) qui me permet de vérifier si le formulaire est complété convenablement.

Mon bouton qui appelle le script est le même que pour appeler la page asp.

Code:

<input type="submit" name="Submit" value="Confirmer et imprimer" onClick="verif_formulaire()">

J'ai donc mis onclick="nomdelafonction"

Je fais un test en ne mettant rien dans le nom, j'appuie sur le bouton, il reconnaît qu'il n'y a rien dans la zone de texte "nom" et envoi une alert et lorsque j'ai cliqué sur "OK", il interprète la page asp (il envoi les info vers ma base de données).

Cela ne me permet pas de compléter les champs vides.

Ce qu'il faudrait faire c'est tant qu'il y'a des alertes, ne pas appeler la page asp.

Pensez-vous que c'est possible ?

Merci d'avance pour l'aide.

bgs

Salut beegees,

bon j'ai bien recu ton mail et je vais regardé ca après ;)! (j'étais parti manger)

Sinon pour ton pb, biensur que c'est possible, voici un exemple de comment faire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript" language="javascript"> function verif() { erreur = 0; with(docuement.nom_de_ton_formulaire) { if(nom_dun_champs.value == "") { alert("Veuillez remplir le champs : nom_dun_champs"); erreur = 1; } } if(erreur == 0) { return true; } else { return false; } } </script>
Code:

1 2 3 4 5 <form name="nom_du_formulaire" action="traitement.asp" method="post" onSubmit="return verif()"> <input type="text" name="nom_dun_champs" size="10" maxlength="30"> <input type="submit" name="soumettre" value="Envoyer"> </form>
Ce bout de code est vraiment simpliste!
Tu peux mettres le focus sur le premier champs incomplet, tu peux mettre un fond de couleur pour démarquer le champs....etc
Tu peux biensur le rendre générique!
Mais bon ca c'est à toi de voir!

07/09/2006, 13h45
SpaceFrog

dans la balise form => onsubmit = fonction de verif

et ton submit tu vires le onclick ...
07/09/2006, 16h58
beegees

Bonjour SpaceFrog,

Merci pour ta réponse.

J'ai mis ceci :

Code:

<form name="form1" method="post" onSubmit="verif_formulaire()" action="maj_ci.asp">

Et ça n'a pas l'air de fonctionner.

Il ne vérifie pas si il y'a des zone de texte vide.

Bien à toi.

bgs

Salut Hug0_76,

En fait j'avais déjà un code qui me permettait de voir si tout était bien rempli mais j'avoue que ton code me semble intéressant c'est lui qui dit si on envoi le formulaire ou non, je vais regarder à cela de plus près

:merci:

bgs
Citation:
Envoyé par Hug0_76
Salut beegees,

bon j'ai bien recu ton mail et je vais regardé ca après ;)! (j'étais parti manger)

Sinon pour ton pb, biensur que c'est possible, voici un exemple de comment faire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript" language="javascript"> function verif() { erreur = 0; with(docuement.nom_de_ton_formulaire) { if(nom_dun_champs.value == "") { alert("Veuillez remplir le champs : nom_dun_champs"); erreur = 1; } } if(erreur == 0) { return true; } else { return false; } } </script>
Code:

1 2 3 4 5 <form name="nom_du_formulaire" action="traitement.asp" method="post" onSubmit="return verif()"> <input type="text" name="nom_dun_champs" size="10" maxlength="30"> <input type="submit" name="soumettre" value="Envoyer"> </form>
Ce bout de code est vraiment simpliste!
Tu peux mettres le focus sur le premier champs incomplet, tu peux mettre un fond de couleur pour démarquer le champs....etc
Tu peux biensur le rendre générique!
Mais bon ca c'est à toi de voir!

07/09/2006, 17h02
beegees

Hug0_76,

Une question tout bête :

Return = true ça veut dire que le formulaire va être traité ?

Merci

bgs

Citation:

Envoyé par SpaceFrog

dans la balise form => onsubmit = fonction de verif

et ton submit tu vires le onclick ...

Bonjour SpaceFrog, bonjour tout le monde,

Je me permets de revenir sur le même sujet car après plusieurs heures de recherche (sur Goolge,...) d'essais... je n'arrive toujours pas à contrôler si tous les champs de mon formulaire sont bien remplis.

Le problème est que lorsque je clic sur le bouton d'envoi du formulaire, il vérifié le premier champs qui est "nom", voit qu'il n'est pas rempli, m'envoi une fenêtre alerte.

Quand je clique sur OK de cette fenêtre alerte, c'est l'action du formulaire qui se met en route alors que je met bien dans nom : returns = false.

Voici les parties du code les plus importantes pour ce problème :

Voici la fonction qui vérifie les champs vides :
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 <script type="text/javascript"> function verif_formulaire() { if(document.form1.nom.value == "") { alert("Veuillez entrer votre nom!"); document.form1.nom.focus(); return false; } if(document.form1.prenom.value == "") { alert("Veuillez entrer votre prénom!"); document.form1.prenom.focus(); return false; } if(document.form1.naissance.value == "") { alert("Veuillez entrer votre lieu de naissance!"); document.form1.naissance.focus(); return false; } if(document.form1.paysnaissance.value == "") { alert("Veuillez entrer votre pays de naissance!"); document.form1.paysnaissance.focus(); return false; } if(document.form1.nationalite.value == "") { alert("Veuillez entrer votre nationalité!"); document.form1.nationalite.focus(); return false; } if(document.form1.rue.value == "") { alert("Veuillez entrer votre rue!"); document.form1.rue.focus(); return false; } if(document.form1.numero.value == "") { alert("Veuillez entrer le numéro de la rue!"); document.form1.numero.focus(); return false; } if(document.form1.CP.value == "") { alert("Veuillez entrer le code postal de votre commune!"); document.form1.CP.focus(); return false; } if(document.form1.ville.value == "") { alert("Veuillez entrer le nom de votre commune!"); document.form1.ville.focus(); return false; } if(document.form1.tel.value == "") { alert("Veuillez entrer votre numéro de téléphone/GSM!"); document.form1.tel.focus(); return false; } if(document.form1.email.value == "") { alert("Veuillez entrer votre adresse Email!"); document.form1.email.focus(); return false; } } </script>
Voici la balise form :

Code:

<form name="form1" action="maj_ci.asp" method="post" onSubmit="return verif_formulaire()">

Si vous pensez qu'il manque du code, n'hésitez pas à le demander.

Merci d'avance pour votre aide.

bgs

Salut BeeGees :)

Alors ce que je ferais a ta place c'est mettre une variable (msg par ex)

qui s'incremente si des champs ne sont pas remplis

e.g :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var msg = ""; if(document.form1.nom.value == "") { msg += "Veuillez saisir un nom \n"; document.form1.nom.focus(); ... msg += "Veuillez saisir un prenom" ; .... if (msg != "" ) { alert(msg); return false; } else return true; } // fin fonction
voila ce qui serait bien c'est que tu verifies bien que les champs soient des string ou des int avec une longueur mini ... maxi .. utiliser des regExp pour la validation de l'email et enfin rendre generique ta fonction pour tester tous les formulaires de ton site ( c'est a dire d ena passer le nom en dure du form)

09/09/2006, 14h07
beegees

Salut NeHuS,

Merci pour ta réponse.

Je teste et te dis quoi.

A tout de suite.

beegees

Me revoilà,

ça fonctionne nikel !

Un truc super étrange, c'est que j'ai mélange ton code et le mien et ça fonctionne quand même.

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<script type="text/javascript">
function verif_formulaire()
 
{var msg = ""; 
 
 if(document.form1.nom.value == "")  {
 msg += "Veuillez saisir un nom \n";
 
   document.form1.nom.focus();
   }
 
 
 if(document.form1.prenom.value == "")  {
   alert("Veuillez entrer votre prénom!");
   document.form1.prenom.focus();
   return false;
  }
 
  if(document.form1.txtmatricule1.value == "")  {
   alert("Veuillez entrer votre matricule!");
   document.form1.txtmatricule1.focus();
   return false;
  }
 
  if(document.form1.txtmatricule2.value == "")  {
   alert("Veuillez entrer votre matricule!");
   document.form1.txtmatricule2.focus();
   return false;
  }
 
 if(document.form1.naissance.value == "") {
   alert("Veuillez entrer votre lieu de naissance!");
   document.form1.naissance.focus();
   return false;
  }
 
 if(document.form1.paysnaissance.value == "") {
   alert("Veuillez entrer votre pays de naissance!");
   document.form1.paysnaissance.focus();
   return false;
  }
 
 if(document.form1.nationalite.value == "") {
   alert("Veuillez entrer votre nationalité!");
   document.form1.nationalite.focus();
   return false;
  }
 
 if(document.form1.rue.value == "") {
   alert("Veuillez entrer votre rue!");
   document.form1.rue.focus();
   return false;
  }
 
 
 if(document.form1.numero.value == "") {
   alert("Veuillez entrer le numéro de la rue!");
   document.form1.numero.focus();
   return false;
  }
 
   if(document.form1.CP.value == "") {
   alert("Veuillez entrer le code postal de votre commune!");
   document.form1.CP.focus();
   return false;
  }
 
     if(document.form1.ville.value == "") {
   alert("Veuillez entrer le nom de votre commune!");
   document.form1.ville.focus();
   return false;
  }
 
   if(document.form1.tel.value == "") {
   alert("Veuillez entrer votre numéro de téléphone/GSM!");
   document.form1.tel.focus();
   return false;
  }
 
 if(document.form1.email.value == "") {
   alert("Veuillez entrer votre adresse Email!");
   document.form1.email.focus();
   return false;
  }
  if (msg != "" )
{
alert(msg);
return false;
}
 
} // fin fonction 
 
</script>

Bon Week-End et :merci:

bgs