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?

Contrôle de formulaire avec Javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager