Validation de plusieurs champs d'un formulaire

Version imprimable

BOnjour,

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

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
<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:

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.

10/07/2011, 09h27
javatwister

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

Citation:

Envoyé par javatwister

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

:cry: 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:

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>

10/07/2011, 11h43
javatwister

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

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

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
<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?

10/07/2011, 12h25
Prof_Matches

Quand je ne mets rien, j'ai bien l'alert mais quand je mets uniquement le 'nom', le traitement se fait.
10/07/2011, 12h38
javatwister

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...

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:

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:

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>

10/07/2011, 14h00
javatwister

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é;
10/07/2011, 14h10
javatwister

oups, il restait un bout de formulaire test, désolé;
10/07/2011, 14h11
Prof_Matches

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 '.') ?
10/07/2011, 14h13
javatwister

eh bien, je n'osais pas t'en parler :mrgreen: 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.)
10/07/2011, 16h20
Prof_Matches

Effectivement ! Mais c'est un peu trop poussé pour moi (actuellement) :roll:
20/07/2011, 00h18
Prof_Matches

Merci pour ton aide.