Contrôle de formulaire avec Javascript

**darkterreur** · 02/09/2010, 14h41

Bonjour,
j'ai réaliser un simple formulaire de saisie pour une fonction mail, et mon contrôle en javascript ne fonctionne pas, mais je ne comprend pas pourquoi.
J'utilise wamp et je n'ai rien installer de particulier ( je ne sais pas si je devais)

j'ai realisé deux page différente en esperant que cela fonctionne mais aucune des deux ne fonctionnent.
Je vous colle mes deux pages ici

1er essaye :

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
<?php
 
 
 
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript">
<!--
function MM_validateForm() { //v4.0
  if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
      if (val) { nm=val.name; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
          if (p<1 || p==(val.length-1)) errors+='- '+nm+' saisisser un mail valid.\n';
        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);
            if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
      } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' .\n'; }
    } if (errors) alert('Renseigner les champs suivants:\n'+errors);
    document.MM_returnValue = (errors == '');
} }
//-->
</script>
</head>
 
<body>
	<div class="content_form">
	  <h1>Contact</h1>
		<form name="contact" action="valid_contact.php">
			<table width="400" border="0" align="center" cellpadding="1" cellspacing="1">
			  <tr>
				<td width="186">Nom</td>
				<td width="207"><input type="text" name="nom" id="nom" /></td>
			  </tr>
			  <tr>
				<td>Prénom</td>
				<td><input type="text" name="prenom" id="prenom" /></td>
			  </tr>
			  <tr>
				<td>E-mail</td>
				<td><input name="email" type="text" id="email" onblur="MM_validateForm('email','','RisEmail');return document.MM_returnValue" /></td>
			  </tr>
			  <tr>
				<td valign="top">Message</td>
				<td><textarea name="message" id="message" cols="45" rows="5"></textarea></td>
			  </tr>
			  <tr>
				<td>&nbsp;</td>
				<td><input name="envoyer" type="submit" id="envoyer" onclick="MM_validateForm('nom','','R','email','','RisEmail','message','','RisEmail');return document.MM_returnValue" value="Envoyer" /></td>
			  </tr>
			</table>
		</form>
 
	</div>
</body>
</html>

et voici le deuxieme code :

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
71
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript">
<!--
	function verifMail(email)
	{
	   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
	   if(!regex.test(email.value))
	   {
		  surligne(email, true);
		  return false;
	   }
	   else
	   {
		  surligne(email, false);
		  return true;
	   }
	}
 
	function verifForm(f)
	{
	   var mailOk = verifMail(f.email);
 
	   if(mailOk)
		  return true;
	   else
	   {
		  alert("Veuillez remplir correctement le champ Email !!");
		  return false;
	   }
	}
//-->
</script>
</head>
 
<body>
	<div class="content_form">
	  <h1>Contact</h1>
		<form name="contact" action="valid_contact.php  onsubmit="return verifForm(this)"">
			<table width="400" border="0" align="center" cellpadding="1" cellspacing="1">
			  <tr>
				<td width="186">Nom</td>
				<td width="207"><input type="text" name="nom" id="nom" /></td>
			  </tr>
			  <tr>
				<td>Prénom</td>
				<td><input type="text" name="prenom" id="prenom" /></td>
			  </tr>
			  <tr>
				<td>E-mail</td>
				<td><input name="email" type="text" id="email" onblur="verifMail(this)" /></td>
			  </tr>
			  <tr>
				<td valign="top">Message</td>
				<td><textarea name="message" id="message" cols="45" rows="5"></textarea></td>
			  </tr>
			  <tr>
				<td>&nbsp;</td>
				<td><input name="envoyer" type="submit" id="envoyer" value="Envoyer" /></td>
			  </tr>
			</table>
		</form>
 
	</div>
</body>
</html>

Merci de bien vouloir éclairer ma lanterne sur ces défauts SVP, merci d'avance.

**Lenézé** · 02/09/2010, 18h38

Bonjour,

J'ai analysé ton deuxième code, je pense que tu peux plus aisément le comprendre.

Le problème vient du fait que tu appelles une fonction (surligne) alors qu'elle n'existe pas.

Code :

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

surligne(email, false);

Le code suivant colorera l'email s'il est invalide :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript">
<!--
	function verifMail(email)
	{
	   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
	   if(!regex.test(email.value))
	   {
		  document.getElementById('email').style.color="red";
		  return false;
	   }
	   else
	   {
		  document.getElementById('email').style.color="red";
		  return true;
	   }
	}
 
	function verifForm(f)
	{
	   var mailOk = verifMail(f.email);
 
	   if(mailOk)
		  return true;
	   else
	   {
		  alert("Veuillez remplir correctement le champ Email !!");
		  return false;
	   }
	}
//-->
</script>
</head>
 
<body>
	<div class="content_form">
	  <h1>Contact</h1>
		<form name="contact" action="valid_contact.php  onsubmit="return verifForm(this)"">
			<table width="400" border="0" align="center" cellpadding="1" cellspacing="1">
			  <tr>
				<td width="186">Nom</td>
				<td width="207"><input type="text" name="nom" id="nom" /></td>
			  </tr>
			  <tr>
				<td>Prénom</td>
				<td><input type="text" name="prenom" id="prenom" /></td>
			  </tr>
			  <tr>
				<td>E-mail</td>
				<td><input name="email" type="text" id="email" onblur="verifMail(this)" /></td>
			  </tr>
			  <tr>
				<td valign="top">Message</td>
				<td><textarea name="message" id="message" cols="45" rows="5"></textarea></td>
			  </tr>
			  <tr>
				<td>&nbsp;</td>
				<td><input name="envoyer" type="submit" id="envoyer" value="Envoyer" /></td>
			  </tr>
			</table>
		</form>
 
	</div>

Si tu as des questions concernant ce code, n'hésites surtout pas à revenir vers moi.

Bonne continuation,

Lenézé

**darkterreur** · 03/09/2010, 09h56

Bonjour Lenézé,

merci pour ta réponse.

Je comprend, il s'agit d'une fonction objet qui permet de rappeler mon champs dans mon document, je ne suis pas assez a l'aise avec l'objet pour le remarquer seul, je le test de ce pas.

En revanche pour le code initiale, si j'avais charger une bibliothèque particulière contenant la fonction "surligne" cela aurai fonctionner?

Quand est-il de mon premier code? Bien qu'il soit bien plus complexe, je suis curieux de connaitre les erreurs qui m'ont fait défauts.

Merci d'avance

**darkterreur** · 03/09/2010, 17h51

Je suis désoler, mais cela ne fonctionne pas tout a fait comme je le pensait.
Le champs mail deviens rouge quand il perd le focus et que le champs n'est pas remplit correctement.

Je m'attendais a se que cela se fasse lors de la pression du bouton submit, avec un petit message qui apparait pour dire que c'est ce champs qui fait défaut.

comment peut ton en arriver a cela?

**Lenézé** · 03/09/2010, 18h10

Le champs mail deviens rouge quand il perd le focus et que le champs n'est pas remplit correctement.

C'est ce que j'ai souhaité faire pour t'aider à comprendre le code.

Je m'attendais a se que cela se fasse lors de la pression du bouton submit, avec un petit message qui apparait pour dire que c'est ce champs qui fait défaut.

Tu essayes et je corrige si tu n'y arrive pas

En revanche pour le code initiale, si j'avais charger une bibliothèque particulière contenant la fonction "surligne" cela aurai fonctionner?

Tout à fait.
De plus, ton premier code fonctionne chez moi. Je pense cependant que pour comprendre javascript, tu devrais essayer tout d'abord de créer tes propres petits scripts (comme l'exemple 2) avant de regarder plus complexe.

Je reste à ton entière disposition,
Cdt,

Lenézé

**darkterreur** · 03/09/2010, 18h52

Merci de toute l'attention que tu me porte

je vais tester cela se soir, mon premier code est'il un exemple de code qui se lance avec le bouton submit?

pour ma premier page, les email ne passe pas, surtout au format email@truc.qqc

comment cela se fait-il?

**Lenézé** · 03/09/2010, 19h02

je vais tester cela se soir, mon premier code est'il un exemple de code qui se lance avec le bouton submit?

Le premier code se lance notamment au clic sur le bouton submit

Code :

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

onclick=""

pour ma premier page, les email ne passe pas, surtout au format email@truc.qqc

Si tu parles du code que je t'ai fourni, c'est normal j'en ai oublié un bout

Voici le code fonctionnel

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript">
<!--
	function verifMail(email)
	{
	   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
	   var matches = email.value.match(regex);
	   if(matches)
	   {
		  document.getElementById('email').style.color="green";
		  return true;
	   }
	   else
	   {
		  document.getElementById('email').style.color="red";
		  return false;
	   }
	}
//-->
</script>
</head>
 
<body>
	<div class="content_form">
	  <h1>Contact</h1>
		<form name="contact" action="valid_contact.php">
			<table width="400" border="0" align="center" cellpadding="1" cellspacing="1">
			  <tr>
				<td width="186">Nom</td>
				<td width="207"><input type="text" name="nom" id="nom" /></td>
			  </tr>
			  <tr>
				<td>Prénom</td>
				<td><input type="text" name="prenom" id="prenom" /></td>
			  </tr>
			  <tr>
				<td>E-mail</td>
				<td><input name="email" type="text" id="email" onblur="verifMail(this)" /></td>
			  </tr>
			  <tr>
				<td valign="top">Message</td>
				<td><textarea name="message" id="message" cols="45" rows="5"></textarea></td>
			  </tr>
			  <tr>
				<td>&nbsp;</td>
				<td><input name="envoyer" type="submit" id="envoyer" value="Envoyer" /></td>
			  </tr>
			</table>
		</form>
 
	</div>

Au boulot

**darkterreur** · 03/09/2010, 19h08

ha cool
en revanche tu ma dis que mon premier code marche chez toi, tu parle du compliquer?
car moi le compliquer ne laisse pas passer les adresses email

on parlait bien de la même chose?

**darkterreur** · 03/09/2010, 19h16

je suppose que si j'utilise un onclik je dois enlever le onsubmit ?

**darkterreur** · 03/09/2010, 19h22

alors des la premiere saisie le champs email est deja en rouge
deplus il n'accepte pas le format standars tel que email@truc.qqc

mais bon on se rapproche, les message apres le onclik fonctionnent

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
71
72
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript">
<!--
	function verifMail(email)
	{
	   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
	   var matches = email.value.match(regex);
	   if(matches)
	   {
		  document.getElementById('email').style.color="red";
		  return false;
	   }
	   else
	   {
		  document.getElementById('email').style.color="red";
		  return true;
	   }
	}
 
	function verifForm(f)
	{
	   var mailOk = verifMail(f.email);
 
	   if(mailOk)
		  return true;
	   else
	   {
		  alert("Veuillez remplir correctement le champ Email !!");
		  return false;
	   }
	}
//-->
</script>
</head>
 
<body>
	<div class="content_form">
	  <h1>Contact</h1>
		<form name="contact" action="valid_contact.php">
			<table width="400" border="0" align="center" cellpadding="1" cellspacing="1">
			  <tr>
				<td width="186">Nom</td>
				<td width="207"><input type="text" name="nom" id="nom" /></td>
			  </tr>
			  <tr>
				<td>Prénom</td>
				<td><input type="text" name="prenom" id="prenom" /></td>
			  </tr>
			  <tr>
				<td>E-mail</td>
				<td><input name="email" type="text" id="email" onblur="verifMail(this)" /></td>
			  </tr>
			  <tr>
				<td valign="top">Message</td>
				<td><textarea name="message" id="message" cols="45" rows="5"></textarea></td>
			  </tr>
			  <tr>
				<td>&nbsp;</td>
				<td><input name="envoyer" type="submit" id="envoyer" value="Envoyer" onclick="return verifForm(this)"/></td>
			  </tr>
			</table>
		</form>
 
	</div>
</body>
</html>

**Lenézé** · 03/09/2010, 19h26

Ca reste rouge tout simplement à cause du

Code :

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

 document.getElementById('email').style.color="red";

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
function verifMail(email)
	{
	   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
	   var matches = email.value.match(regex);
	   if(matches)
	   {
		  document.getElementById('email').style.color="green";
		  return true;
	   }
	   else
	   {
		  document.getElementById('email').style.color="red";
		  return false;
	   }
	}

Fera l'affaire.

**darkterreur** · 03/09/2010, 19h56

magnifique

bon et maintenant si je veux qu'il test les champs vide tu peux me donner un indice?

**Lenézé** · 03/09/2010, 21h58

Plusieurs possibilités:
- la simple, contrôler chaque champ individuellement. (regarde du côté de .value et .length)
- la plus compliquée (au début), récupérer le noeud de ton form, analyser combien d'éléments (input) il contient et vérifier dans une boucle la valeur de chacun des éléments.

La solution simple consiste juste à refaire le travail fait pour l'email, mais au lieu d'analyser la validité de l'adresse mail (via une expression régulière, aussi appelée regexp) tu test juste la taille de la valeur.

Ça va le faire?

**darkterreur** · 04/09/2010, 15h52

je voit le principe, en revanche, je ne connais pas la fonction javascript pour déterminer si le champs est vide ou non.

mais je suppose que la syntaxe sera exactement la même mise a part que la regex sera remplacer par la fonction qui vérifie char = 0 ou null.

et bien sur nommer les diffèrents champs cibler.
existe-il un site comme php.net pour les fonction javascript?

merci d'avance Lenézé

**Lenézé** · 05/09/2010, 18h20

Code :

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

if(document.Formulaire.Nom.value=='')

Aucune idée pour la liste des fonctions javascript!
Une recherche google avec le type de données que tu cherches à manipuler te sortira les propriétés et méthodes correspondantes.

Pour tout ce qui est évènement, pareil : "event javascript" etc...

Tout est là, mais il faut chercher un peu

Bon courage,
Lenézé

**darkterreur** · 06/09/2010, 21h36

Merci pour ces informations
je vais travailler un peu ceci.

Merci, le sujet va se terminer, accepter vous que je vous pose d'autre question par email en javascript?

Merci d'avance.

**Lenézé** · 06/09/2010, 21h51

Bien entendu, c'est un plaisir de rendre service.

Cdt,

Lenézé

Contrôle de formulaire avec Javascript

JavaScript

Discussions similaires

Partager

Partager