Validation de plusieurs champs d'un formulaire

**Prof_Matches** · 10/07/2011, 09h14

BOnjour,

J'ai une page 'formulaire_contact.html' sur laquelle j'ai des champs que l'utilisateur doit remplir :

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<form name="formulaire" action="formulaire_contact_tr.php" method="post" enctype="multipart/form-data" onsubmit="return valider()">
 
		<table width="627" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>&nbsp;</td>
            <td colspan="3"><span style="font-size: large; font-weight: bold; font-family: &quot;Arno Pro&quot;"><u>Formulaire de contact : </u></span></td>
            </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td colspan="2">&nbsp;</td>
          </tr>
          <tr>
            <td width="25">&nbsp;</td>
            <td width="233"><div align="right" >Votre nom et prénom :&nbsp;&nbsp;</div></td>
            <td colspan="2"><input name="nom" type="text" size="30" />&nbsp;<span style="font-weight: bold; color: #FF0000">*</span></td>
          </tr>
 
          <tr>
            <td>&nbsp;</td>
            <td><div align="right" >Adresse mail :&nbsp;&nbsp;</div></td>
            <td colspan="2"><input name="mail" type="text" size="50" />
              <span style="font-weight: bold">&nbsp;<span style="color: #FF0000">*</span></span></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><div align="right" >Téléphone :&nbsp;&nbsp;</div></td>
            <td colspan="2"><input name="telephone" type="text" size="15" /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><div align="right" >Objet de votre message :&nbsp;&nbsp;</div></td>
            <td colspan="2"><select name="choix">
              <option value="pas de choix effectué !" selected="selected">Veuillez choisir un objet ...</option>
              <option value="Information sur le stock">Information sur le stock</option>
              <option value="Vendre des produits d'occasion">Je souhaite vendre des produits d'occasion</option>
              <option value="Achat d'une carte de membre">Je souhaite acheter une carte de membre</option>
              <option value="Concerne le site internet">Concerne le site internet</option>
              <option value="Idées, suggestions">Idées, suggestions, ...</option>
              <option value="Autre sujet">Concerne un autre sujet</option>
 
            </select>&nbsp;<span style="font-weight: bold; color: #FF0000">*</span></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td valign="top"><div align="right" >Votre message :&nbsp;</div></td>
            <td width="332" valign="top"><textarea name="message" rows="8" cols="50">...</textarea></td>
            <td width="37" valign="top">&nbsp;<span style="font-weight: bold; color: #FF0000">*</span></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td colspan="3" valign="top">Vous souhaitez être contacté par : 
              <input type="radio" name="contact" value="mail" id="mail" checked="checked" /> <label for="mail">mail</label>
             ou par 
		<input type="radio" name="contact" value="téléphone" id="phone" /> <label for="phone">téléphone</label></td>
            </tr>
          <tr>
            <td>&nbsp;</td>
            <td colspan="3" valign="top">&nbsp;</td>
          </tr>
        </table>
 
        <table width="100%" border="0" cellspacing="0" cellpadding="0" valign="top">
  <tr>
    <td width="36%"><div align="center">
      <input type="reset" value="Efface les données du formulaire">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Envoi de votre message" />
    </div></td>
    </tr>
</table>
</form>

Le bouton OnSubmit lance la procédure de vérification de la validité des champs

j'y ai placé quelques 'alert' pour faire des vérifications)

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
<script language="javascript" type="text/javascript"> 
function valider() 
{ 
	 	var form_erreur ="";
		var frm=document.forms['formulaire'];
        alert ("alerte avant le test contenant la valeur du champ 'nom' : "+frm.elements['nom'].value);
  	if(frm.elements['nom'].value == "") 
				{form_erreur = "Veuillez indiquer votre nom";
				alert("alarte après le premier test contenant la valeur de form_erreur : "+form_erreur);}
	if (form_err != "") {
			alert("alerte annoncant form_erreur n'est pas vide et peut donc na pas valider le formulaire.")
			return false;	
			}
  else {
  			alert("cencé nous donner le contenu de form_err"+form_erreur);
  return true}
}
</script>

Le soucis c'est que quand il n'y a rien dans la champ 'nom' la fonction semble quand même renvoyer 'TRUE' car le formulaire est validé et la page 'formulaire_contact_tr.php' est affichée.
Je ne vois pas pourquoi ???
Est-ce que quelqu'un aurait une idée ? Merci d'avance.

**javatwister** · 10/07/2011, 09h27

attention: form_err n'existe pas; ("form_erreur")

**Prof_Matches** · 10/07/2011, 11h18

Envoyé par javatwister

attention: form_err n'existe pas; ("form_erreur")

Oufti... merci pour l'info. Avec la correction du terme ca fonctionne. Merci Javatwister.

Maintenant que j'essaie de mettre un second test, la page est directement traitée... Vois-tu ce que cela pourrait être ?

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
<script language="javascript" type="text/javascript"> 
function valider() 
{ 
	 	var form_erreur ="";
		var frm=document.forms['formulaire'];
  	if(frm.elements['nom'].value == "") 
				{form_erreur = "Veuillez indiquer votre nom";}
	if (frm.elements['mail'].value =="")
				{form_erreur += "Veuillez indiquer votre adresse mail";} 
	if (form_erreur != "") 
				{alert (form_erreur);
			return false;	
			}
  else {
  return true}
}
</script>

**javatwister** · 10/07/2011, 11h43

tu veux dire, avec un champ nom ou mail vide? et tu as bien les alertes?

**javatwister** · 10/07/2011, 12h06

petite suggestion d'amélioration, pour ne pas t'arracher les cheveux avec 36 boucles (ah ah):

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
<form id="f" action="" onsubmit="return verif(this)">
	<p>
		<label for="nom">votre nom <input type="text" name="nom" id="nom" /></label><br />
		<label for="mail">votre mail <input type="text" name="mail" id="mail" /></label><br />
		<label for="adresse">votre adresse <input type="text" name="adresse" id="adresse" /></label>
	</p>
 
	<p>
		<input type="submit" />
	</p>
</form>
 
<script type="text/javascript"> 
 
var check={
	mail:"Saisissez votre mail",
	nom:"Quel est votre nom?",
	adresse:"Où habitez-vous?"
}
 
function verif(fr){
	for(i=0;i<fr.elements.length;i++){
		if(!fr.elements[i].value){
			alert(check[fr.elements[i].name]);
			return false
		}
	}
}
 
</script>

Tu vois le principe?

**Prof_Matches** · 10/07/2011, 12h25

Quand je ne mets rien, j'ai bien l'alert mais quand je mets uniquement le 'nom', le traitement se fait.

**javatwister** · 10/07/2011, 12h38

c'est sûrement un pbm d'ordre dans le traitement des instructions;

mais je t'assure, teste mon code et tu comprendras la différence...

**Prof_Matches** · 10/07/2011, 13h52

OK : ça roule. Je vois le principe de ton code.
J'essaie de suite avec les champs de type 'text' et je te tiens au courant.

Et concernant les champs de type 'select' :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<select name="choix">
              <option value="pas de choix effectué !" selected="selected">Veuillez choisir un objet ...</option>
              <option value="Information sur le stock">Information sur le stock</option>
              <option value="Vendre des produits d'occasion">Je souhaite vendre des produits d'occasion</option>
              <option value="Achat d'une carte de membre">Je souhaite acheter une carte de membre</option>
              <option value="Concerne le site internet">Concerne le site internet</option>
              <option value="Idées, suggestions">Idées, suggestions, ...</option>
              <option value="Autre sujet">Concerne un autre sujet</option>
 
            </select>

et ceux de type 'radio':

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<input type="radio" name="contact" value="mail" id="mail" checked="checked" /> <label for="mail">mail</label>
             ou par 
		<input type="radio" name="contact" value="téléphone" id="phone" /> <label for="phone">téléphone</label>

**javatwister** · 10/07/2011, 14h00

pour les radio tu ne peux pas tester grand chose, vu qu'au moins un des deux sera coché...

en adaptant à ton form, ça donne ça:

http://javatwist.imingo.net/test.htm

par défaut, l'alerte indique le premier champ nom renseigné;

**javatwister** · 10/07/2011, 14h10

oups, il restait un bout de formulaire test, désolé;

**Prof_Matches** · 10/07/2011, 14h11

YES ! Ça fonctionne. Merci
Est-ce que tu crois que c'est nécessaire de vérifier l'adresse mail (contient au moins un '@' et un '.') ?

**javatwister** · 10/07/2011, 14h13

eh bien, je n'osais pas t'en parler

le test "champ nul" est le strict minimum, effectivement;
il va falloir que tu crées des masques pour chaque donnée entrée, quitte à rappeler dans l'alerte la syntaxe demandée;
(2 mots pour le champ nom prénom, 10 numéros pour le tel, etc.)

**Prof_Matches** · 10/07/2011, 16h20

Effectivement ! Mais c'est un peu trop poussé pour moi (actuellement)

**Prof_Matches** · 20/07/2011, 00h18

Merci pour ton aide.

Validation de plusieurs champs d'un formulaire

JavaScript

Discussions similaires

Partager

Partager