Discussion :

[lolaalol]

J'ai un formulaire qui contient 7 champs

• nom
• prenom
• téléphone
• courriel
• region
• ville
• message

J'ai une function javascript qui retourne vrai si tout mes champs sont correct, j'appel cette function dans le onsubmit de mon formulaire. Si tout les champs sont correct je lance un php script qui envoie une email.

Mon problème est que mon script est lancer même si tous mes champs ne sont pas correct

Voici ma function JS :

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
function validate()
{
	var result = true
	var xPrenom = document.forms["form1"]["prenom"].value;
	var xNom = document.forms["form1"]["nom"].value;
	var xTel = document.forms["form1"]["tel"].value;
	var xCourriel = document.forms["form1"]["mail"].value;
	var xMessage = document.forms["form1"]["message"].value;
 
	if(xPrenom == null || xPrenom =="")
	{
		document.getElementById("prenom").style.borderColor="red";
		result = false;
	}
	else
	{
		document.getElementById("prenom").style.borderColor="green";
	}
 
	if(xNom == null || xNom =="")
	{
		document.getElementById("nom").style.borderColor="red";
		result = false;
	}
	else
	{
		document.getElementById("nom").style.borderColor="green";
	}
 
	if(xTel == null || xTel =="")
	{
		document.getElementById("tel").style.borderColor="red";
		result = false;
	}
	else
	{
		document.getElementById("tel").style.borderColor="green";
	}
 
	if(xCourriel == null || xCourriel =="")
	{
		 document.getElementById("mail").style.borderColor="red";
		 result = false;
	}
	else
	{
		document.getElementById("mail").style.borderColor="green";
	}
 
	if(xMessage == null || xMessage =="")
	{
		 document.getElementById("message").style.borderColor="red";
		 result = false;
	}
	else
	{
		document.getElementById("message").style.borderColor="green";
	}
	var atpos = xCourriel.indexOf("@");
	var dotpos = xCourriel.lastIndexOf(".");
 
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
	{
		document.getElementById("mail").style.borderColor="red";
		result = false;
	}
	else
	{
		document.getElementById("mail").style.borderColor="green";
	}
 
	return result;

Voici le code de mon Formulaire :

Code html :

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
<form action="send.php" onsubmit="return validate()" method="post" name="form1">
	<table id="TableSoumission">
		<tr>
			<td align="right" style="font-size:15px;">Prénom <span id="Obligatoire">*</span></td>
			<td align="center"><input type="text" name="prenom" id="prenom"></td>
			<td style="font-size:15px;">Nom <span id="Obligatoire">*</span></td>
			<td><input type="text" name="nom" id="nom"></td>
		</tr>
		<tr>
			<td><br></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td align="right" style="font-size:15px;">Téléphone <span id="Obligatoire">*</span></td>
			<td align="center"><input type="text" name="tel" id="tel" onkeypress="return isNumberKey(event)"></td>
			<td style="font-size:15px;">Courriel <span id="Obligatoire">*</span></td>
			<td><input type="text" name="mail" id="mail"></td>
		</tr>
		<tr>
			<td><br></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td align="right" style="font-size:15px;">Région</td>
			<td align="center"><input type="text" name="region" id="region"></td>
			<td style="font-size:15px;">Ville</td>
			<td><input type="text" name="ville" id="ville"></td>
		</tr>
		<tr>
		</tr>
			<td><br></td>
			<td></td>
			<td></td>
			<td></td>
		<tr>
			<td align="right" style="font-size:15px;" rowspan="4">Besoin <span id="Obligatoire">*</span></td>
		</tr>
			<td><br></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<br>
	<div id="TextAreaDiv">
		<table id="TableSoumission">
			<tr>
				<td align="center"><textarea rows="10" cols="70" align="center" name="message" id="message"></textarea></td>
			</tr>
		</table>
		<br>
		<input style="margin-left:75px; margin-bottom:10px" type="submit" value="envoyer" name="envoyer" id="envoyer">
		<input type="reset" value="vider" name="vider">
	</div>
</form>

[NoSmoking]

Bonsoir,
un peu normal attendu qu'à chaque test tu réaffectes une nouvelle valeur à ta variable result, si la dernière est FAUX le formulaire ne sera pas submité si la dernière est VRAI il le sera.

Tu peux éventuellement gérer avec un compteur d'erreur

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
function validate() {
  var erreur = 0;
  var xPrenom = document.forms["form1"]["prenom"].value;
  var xNom = document.forms["form1"]["nom"].value;
  var xTel = document.forms["form1"]["tel"].value;
  var xCourriel = document.forms["form1"]["mail"].value;
  var xMessage = document.forms["form1"]["message"].value;
  if (xPrenom == null || xPrenom == "") {
    document.getElementById("prenom").style.borderColor = "red";
    erreur ++;
  } else {
    document.getElementById("prenom").style.borderColor = "green";
  }
  if (xNom == null || xNom == "") {
    document.getElementById("nom").style.borderColor = "red";
    erreur ++;
  } else {
    document.getElementById("nom").style.borderColor = "green";
  }
  // la suite
  return erreur == 0;
}

[lolaalol]

J'ai un peu de misère a comprendre. Dès que j'appuis sur Envoyer (submit) ma fonction validate() est appeler. Dans cette fonction j'initialise un bool a true et je test chaque variable, si une variable n'est pas correct result devient false et ne peux pas redevenir true ??

Edit : j'ai viens de faire un test, peut importe la valeur de mes textbox si le mail est valide et que les autres textboxes ont rien, mon message sera envoyer...

Edit 2 : Je semble avoir résolu mon problème en rajoutant une condition avant de faire se test :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
		if( erreur == 0)
                {
		 if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
		 {
		 	document.getElementById("mail").style.borderColor="red";
		  	erreur ++;
		 }
		 else
		 {
		 	document.getElementById("mail").style.borderColor="green";
		 }
		}

Mais je comprend pas pourquoi cette vérification du email faisait tout planter

[andry.aime]

Bonjour,

Code :

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

var xPrenom = document.forms["form1"]["prenom"].value;

Code :

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

var xPrenom = document.forms["form1"].elements["prenom"].value;

C'est valable pour les autres aussi.

A+.

[hackoofr]

une petite suggestion : L'API HTML5 de contrainte de validation, Créez des formulaires fabuleux avec HTML5.
pensez-y

[NoSmoking]

(...que des âneries...)

Rien compris de rien, rien vu de rien, c'est la vieillerie qui me gagne