Verification du remplissage de plusieurs champs

Version imprimable

19/06/2008, 10h53
Tellounet

Verification du remplissage de plusieurs champs

Bonjour,

Toujours avec le tutoriel j'ai trouvé comment vérifier si à la validation du formulaire un champ a été rempli. J'ai essayé avec mes maigres connaissances de l'appliquer à plusieurs champs, sans succès. J'ai 8 input et un textarea à vérifier.

Le code du tuto:

Citation:

<script type='text/javascript'>
function verif(idInput, valeurVide, descriptionChamp)
{
var input = document.getElementById(idInput);

if (input.value == valeurVide) {
input.focus();
alert('Vous devez renseigner le champ "' + descriptionChamp + '".');
} else
alert('Le champ "' + descriptionChamp + '" est bien rempli.');
}
</script>
<input id="text9" type="text"/>
<input onclick="verif('text9', '', 'nom du champ texte');"
value="verif('idInput', '', 'nom du champ texte')" type="button"/>
<select id="select9">
<option value="0">- Faites un choix -</option>
<option value="1">Choix 1</option>
<option value="2">Choix 2</option>
<option value="3">Choix 3</option>
</select>
<input onclick="verif('select9', 0, 'nom du champ select');"
value="verif('idInput', 0, 'nom du champ select')" type="button"/>

J'ai donc appelé l'Id de chacun de mes champs, j'ai copié-modifié
var input = document.getElementById(idInput);
pour chaque valeur.

J'affecte 0 à une variable et je fais un "if" pour chaque champ. S'il est vide je rajoute 1 à la variable.

Enfin, je teste la variable. Si elle est >0 j'envoie un message d'erreur.

Seulement ça ne fonctionne pas.

Je fais donc appel à vous pour me mettre dans la voie.
Sans forcément me mâcher le code, ça m'aiderait beaucoup que vous m'indiquiez dans quelle voie je dois chercher.

Merci d'avance.

Yop!

Lorsque je dois vérifier plusieurs champs, j'utilise un truc du genre:

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
 
<html>
<head>
<script type="text/javaScript">
thenames = new Array("nom", "prenom", "continent");
thetitles = new Array("Nom", "Prénom", "Continent");
function checkinput()
{
  fieldstring ="";
  for (var i = 0; i < thenames.length; i++)
    {
    if (eval("document.forms[0]." + thenames[i] + ".value")=="")
      {
	fieldstring = fieldstring + thetitles[i] + ", \n"
	}
    }
  if (fieldstring!="")
    {
    alert("Vous devez compléter le(s) champ(s) suivant(s) : \n\n" + fieldstring + "\n " );
    }	
  else
    {
    document.forms[0].submit();
    }
}
</script>
</head>
 
<body>
 
<form action="quelquechose.php" method="post">
Nom:<input type=text name='nom' value=''>
<br>
Prénom:<input type=text name='prenom' value=''>
<br>
Continent:<select name='continent'>
<option value='' selected>Sélectionnez un continent</option>
<option value='Afrique'>Afrique</option>
<option value='Amérique du Nord'>Amérique du Nord</option>
<option value='Amérique du Sud'>Amérique du Sud</option>
<option value='Asie'>Asie</option>
<option value='Europe'>Europe</option>
<option value='Océanie'>Océanie</option>
</select>
<br>
<input type=button value="Go!"  onclick="checkinput()">
</form>
 
</body>
</html>

Ca évite d'avoir un alert() par champ.

19/06/2008, 12h23
tusssss

Pour les vérifications de formulaires voir ici dans les contributions
19/06/2008, 12h48
Tellounet

Merci beaucoup, je vais essayer de travailler à partir de ça.

Dès que ça fonctionne je clique sur "résolu" ;)
19/06/2008, 16h11
Tellounet

Le code de ryan est parfaitement adapté à mes besoins, simple à inclure, et en plus modulable à souhait. super!

Par contre va falloir que je réfléchisse à la raison pour laquelle je reçois mon message par mail en double.

Merci beaucoup! :king:

Ju
19/06/2008, 16h14
SpaceFrog

si tu avais suivi le tuto des contributions je penses que tu n'aurais pas le message en double ...

la validation ne doit pas etre blqouée en cas d'echec de verification .
il faut passer par le onsubmit
19/06/2008, 16h26
Tellounet

Je crois que mon message en double vient d'ailleurs, je l'ai déjà eu avant.

En revanche il est vrai que j'ai reçu un message alors que les champs n'étaient pas tous remplis.

Si j'arrivais à comprendre quelque chose au tuto des contributions je l'aurais suivi, mais je ne comprends même pas pourquoi tout est contredit à chaque message...
19/06/2008, 16h32
SpaceFrog

il n'y a rien de contredit, suis les posts ou je parle du principe de base ...
une fois que tu auras compris comment inhiber l'envoi avec un return false dasn le onsubmit tu auras gagné la partie ...
19/06/2008, 16h35
Tellounet

Moui... il m'envoie les nouvelles données... et en même temps les données du test précédent.

Cela vient du fait que le mailer est mis à l'ouverture de la page et que mon formulaire rappelle la page. En reloadant ma page je réexécute le mailer averc les anciennes données... forcément...

Je vais tenter de faire autrement
19/06/2008, 16h39
SpaceFrog

ben faut lancer le mailer uniquement après la validation du form ...
19/06/2008, 16h51
Tellounet

J'avais testé ton exemple, et il m'envoyait ""ok tout est bon ! Envoyé" lorsque je ne remplissais pas les champs, du coup j'ai essayé celui de ryan.

Et oui, mais j'ai beaucoup galéré et je me suis battu avant de réussir à avoir un envoi de mails qui fonctionne. Or, en passant avant le <html> ça fonctionnait justement.

Je dois tout repenser là
19/06/2008, 18h03
Tellounet

Bon, je vais créer une autre appelée à la validation du formulaire (testé), qui lancerait le mailer et avertirait que le mail a été envoyé, puis se fermerait automatiquement au bout de quelques secondes.
Ca mévitera les redondances et ça sera bien plus propre.

D'abord, trouver l'équivalent du taget='blank' lorsque la page est lancée par le form.
20/06/2008, 10h38
Tellounet

Citation:

Envoyé par SpaceFrog

il n'y a rien de contredit, suis les posts ou je parle du principe de base ...
une fois que tu auras compris comment inhiber l'envoi avec un return false dasn le onsubmit tu auras gagné la partie ...

Ben justement, la méthode proposée n'inhibe rien du tout, même en la suivant scrupuleusement.

Ma fonction:

Citation:

<script type="text/javascript">
function VerifForm(){ var AllIsOk=0;

// ici une serie de tests : (exmple si les champs sont vides)
if(document.forms['Formulo'].elements['champ1'].value==''){AllIsOk++;}
if(document.forms['Formulo'].elements['champ2'].value==''){AllIsOk++;}
if(document.forms['Formulo'].elements['champ3'].value==''){AllIsOk++;}
if(document.forms['Formulo'].elements['champ4'].value==''){AllIsOk++;}
if(document.forms['Formulo'].elements['champ5'].value==''){AllIsOk++;}
if(document.forms['Formulo'].elements['champ6'].value==''){AllIsOk++;}
if(document.forms['Formulo'].elements['champ7'].value==''){AllIsOk++;}
if(document.forms['Formulo'].elements['champ8'].value==''){AllIsOk++;}

//ici le retour de la fonction

if(AllIsOk==0){return true;}
else{
alert('veuillez remplir tous les champs');
return false}
}</script>

Mon appel dans le form:

Citation:

<Form action="formulo.asp" method=POST onsubmit="return VerifForm()">

J'appelle une page sur laquelle est exécuté le mailer.

J'ai vérifié, les noms des champs sont corrects, j'ai essayé avec des id au cas où, rien n'y fait: ma page est toujours appelée même lorsqu'aucun champ n'est rempli
20/06/2008, 12h35
Tellounet

en fait, j'ai bien l'impression que ça n'appelle même pas la fonction VerifForm().

Pourtant elle est déclarée correctement dans mon <head>
20/06/2008, 12h50
E.Bzz

Bonjour,

Citation:

Envoyé par Tellounet

en fait, j'ai bien l'impression que ça n'appelle même pas la fonction VerifForm().

on peut voir le code de ton bouton submit ?

A+
20/06/2008, 13h08
SpaceFrog

mouaip ça sent la soumission dynamique et pas avec un bouton de type submit ...
20/06/2008, 13h10
E.Bzz

Citation:

Envoyé par SpaceFrog

mouaip ça sent la soumission dynamique et pas avec un bouton de type submit ...

Ou le chti onclick qui traîne toujours dans le bouton ...
20/06/2008, 13h15
Tellounet

Citation:

<input type=submit value="Envoyer le message">

Tout bêtement
20/06/2008, 13h18
E.Bzz

Si ta fonction n'est pas appelée, c'est peut être simplement que tu as une autre erreur JS, dans une autre partie du code, et qui plante au chargement.

Et quand JS planté, JS plus marcher :aie:

A+
20/06/2008, 13h25
Tellounet

Ben heu... le seul autre js que j'ai sur cette page c'est:

Citation:

<script type="text/javascript" src="csshorizontalmenu.js"></script>

qui fonctionne très bien, et sur toutes mes pages.

Et des inserts d'éléments qui ne posent aucun problème non plus.

Vous voudriez peut-être le code entier de ma page?

En passant, comme j'ai testé pas mal de chose, mes input ont un name et un id. Mais j'ai testé en appelant l'un et l'autre, pas de différence
20/06/2008, 13h25
SpaceFrog

et les quotes autour de submit ... ?
20/06/2008, 13h30
Tellounet

En effet je les ai oubliées en trafiquant et retrafiquant mon code.

Mais ça ne change rien, avec ou sans
20/06/2008, 14h37
SpaceFrog

oui il n'y a plus qu'avec le code complet que l'on trouvera le bug ...

Mon <head>:

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
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="csshorizontalmenu.css">
<script type="text/javascript" src="csshorizontalmenu.js"></script>
 
 
<script type="text/javascript">
function VerifForm(){ var AllIsOk=0;
 
 
                       if(document.forms['Formulo'].elements['nom'].value==''){AllIsOk++;}
                       if(document.forms['Formulo'].elements['prenom'].value==''){AllIsOk++;}
	          if(document.forms['Formulo'].elements['societe'].value==''){AllIsOk++;}
                       if(document.forms['Formulo'].elements['mail'].value==''){AllIsOk++;}
	          if(document.forms['Formulo'].elements['telephone'].value==''){AllIsOk++;}
                       if(document.forms['Formulo'].elements['adresse'].value==''){AllIsOk++;}
	          if(document.forms['Formulo'].elements['postal'].value==''){AllIsOk++;}
                       if(document.forms['Formulo'].elements['ville'].value==''){AllIsOk++;}
 
                       if(AllIsOk==0){
		alert(AllIsOk);
		return true;}
		else{
		alert('veuillez remplir tous les champs');
		return false}
}</script>

Mon <Form> :

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
<body topmargin="0" onload="donneFocus('champ1');">
...
<Form onsubmit="return VerifForm()" action="formulo.asp" method=POST >
<table width=80% cellpadding=5 class="contenu">
	<tr style="color:#FF6600;">
	<th colspan=2 width=45%> Vos coordonnées:</th>
	<th width=10%></th>
	<th colspan=2 width=45%> Votre demande:</th>
	</tr>
	<tr>
	<td width=25%>Nom (*) :</td><td><input name="nom" tabindex="1" id="champ1" value='' size=25 maxlength=40 type="margin-left:125px;"></td>
	<td width=8%></td><td>Objet de la demande (*) :</td>
	<td><select name="objet" tabindex="9"> <!-- ajouter, enlever ou modifier la liste des sujets proposés -->
	<option>Autre  </option>
	<option>Achat de produit  </option>
	<option>Assister à une conférence  </option>
	<option>Prestation de service </option>
	<option>Question commerciale  </option>
	<option>Question technique  </option>
	</select></td></tr>
	<tr>
	<td width=25%>Prénom&nbsp;(*) :</td><td><input name="prenom" tabindex="2" id="champ2" value='' size=25 maxlength=40></td><td width=8%></td>
	<td colspan=2 rowspan=4><textarea name="message" tabindex="10" id="champ9" value='' cols=45 rows=9></textarea></td></tr>
	<tr>
	<td width=25%>Société (*) :</td><td><input name="societe" tabindex="3" id="champ3" value='' size=25 maxlength=50></td><td width=8%></td></tr>
	<tr>
	<td width=25%>E-mail (*) :</td><td><input name="mail" tabindex="4" id="champ4" value='' size=25 maxlength=40></td><td width=8%></td></tr><tr>
	<td width=25%>Téléphone&nbsp;(*) :</td><td><input name="telephone" tabindex="5" id="champ5" value='' size=25 maxlength=10></td><td width=8%></td></tr><tr>
	<td width=25%>Adresse (*) :</td><td><input name="adresse" tabindex="6" id="champ6" value='' size=25 maxlength=50></td><td width=8%></td></tr><tr>
	<td width=25%>C. Postal (*) :</td><td><input name="postal" tabindex="7" id="champ7" value='' size=25 maxlength=5></td><td width=8%></td></tr><tr>
	<td width=25%>Ville (*) :</td><td><input name="ville" tabindex="8" id="champ8" value='' size=25 maxlength=40></td><td width=8%></td></tr>	</table>
	<p style="font-size:0.8em; font-style:italic; color=grey;">(*) champ obligatoire</p>
	<p style="margin-left:200;"><input type='submit' value="Envoyer le message"></p>
	</Form>
...
</Body>

20/06/2008, 15h35
E.Bzz

Que t'affiche ton alert(AllIsOk) dans les différents cas (champs remplis ou non) ?

A+
20/06/2008, 15h38
tusssss

Ton form n'a pas de name??? Comment tu veux appeler les éléments à l'intérieur de formulo alors que ça n'existe pas? Ou alors j'ai regardé trop vite...
20/06/2008, 15h45
Tellounet

Bwarf!

J'ai enlevé-rajouté plusieurs fois le name, et je l'ai collé en allant un peu vite dans un table juste au dessus du form... évidemment quand je vérifie si le name y est je le vois... une ligne au dessus... :oops:

Bon, du coup ça m'envoie bien mon alert quand je n'ai pas rempli les champs, et l'autre alert me renvoie AllisOK à 0 (forcément).

Bon, je vais pouvoir tester avec le mailer avant de viser plus haut.

Merci, quand on a son propre code sous les yeux à longueur de temps on ne voit plus ce qui devrait y sauter
20/06/2008, 17h24
Tellounet

Tout est bon dans le co(de)chon, mon formulaire n'est submité que quand tout est rempli, le mailer est sur une autre page appelée, ce qui m'évite le doublon. Je vais pouvoir aller plus loin, à savoir le test du champ mail et des numeros de tel et code postal ^^

Merci beaucoup pour l'aide si précieuse.

Au passage, pour ouvrir une fenêtre à part je sais que c'est avec window.open, mais je n'ai pas réussi à la passer dans l'action de mon formulaire. Vous auriez la syntaxe exacte s'il vous plaît?