Discussion :

[Sh4dow49]

Bonjour,

Voila je voudrais effectuer une vérification sur un formulaire avant de l'envoyer.

En fait je voudrais que si l'un des champs est vide on ne l'envoie pas. On ne doit pas l'envoyer non plus si le champ nommé "position" contient autre chose que des chiffres.

J'ai fait ceci :

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
 
function validateForm()
{
	var errorsInForm = 0;
	var i;
	var emptyTest = /^\s*$/;
	var intTest = /^[0-9][0-9]?$/;
 
	//for each element in the form, if one is empty we increment the variable emptyElements
	for (i = 0; i < document.addAppTypeForm.length; i++)
	{
		if (emptyTest.exec(document.addAppTypeForm.element[i].value) == null)
		{
			errorsInForm++;
		}
 
		if (document.addAppTypeForm.element[i] == document.addAppTypeForm.position)
		{
			if (intTest.exec(document.addAppTypeForm.position) == null)
			{
				errorsInForm++;
			}
		}
	}
 
	//if we have any error we return false
	if (errorsInForm != 0)
	{
		alert("You didn't submit valid informations. Please retry.");
		return false;
	}
	//else we return true
	else
	{
		return true;
	}
}

Et l'appel de la fonction :

Code :

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

<form method="post" action="mapage.php" onsubmit="return validateForm();" >

Le formulaire est tout le temps envoyé et je ne vois pas pourquoi.

Voyez vous d'où peut venir le problème ?

Merci d'avance pour votre aide

[Sh4dow49]

Je viens de découvrir que la boucle for ne parcourait que l'élément zero du formulaire (alors que document.addAppTypeForm.length vaut 4)

Mais je ne comprends pas pourquoi car je n'ai rien qui stoppe la boucle durant son exécution ...

[Invité]

Bonjour,

Que contient le formulaire?
As tu mis une alert() en début de boucle for pour visualiser le i et le document.addAppTypeForm.length?

A+

[Sh4dow49]

oui justement c'est comme ca que j'ai découvert que la boucle ne faisait qu'un tour.

une alerte sur document.addAppTypeForm.length me renvoyait 4 (pour le formulaire avec lequel j'ai testé) et une alerte sur i en 1ère commande de la boucle m'a retourné une seule alerte avec zéro comme valeur.


La boucle devrait fonctionner car j'en avais déjà fait une similaire qui fonctionnait très bien

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
function enable_disable() {
	var elementsVides = 0;
	var i;
 
	//pour chaque element du formulaire, si l'un est vide on le compte
	for (i = 0; i < document.forms[0].length; i++)
	{
		if (document.forms[0].elements[i] != document.formulaire.maint)
		{
			if (document.forms[0].elements[i].value == "" || document.forms[0].elements[i].value == null)
			{
				elementsVides++;
			}
		}
	}
 
	//si il y a des elements vides on desactive le bouton, sinon on l'active
	document.getElementById("boutonValider").disabled=(elementsVides > 0)?true:false;
}

J'ai juste ajouté une vérification dans la boucle et changé l'instruction de la fin, rien de méchant mais apparemment ça a suffit à faire que ma fonction ne marche pas ...

[Bovino]

Code :

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

alert(/^\s*$/.exec(''))

Ne renvoie pas null

[Sh4dow49]

j'ai essayé

Code :

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

alert(intTest.exec(document.addAppTypeForm.position.value));

me renvoie bien null si le test échoue (et la valeur du champ si le test réussit)

Par contre en effet un truc comme

Code :

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

alert(emptyTest.exec(document.addAppTypeForm.elements[1].value));

n'affiche rien dans la boite de dialogue

Egalement j'ai remplacé element[i] par elements[i]

[Bovino]

Code :

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

var emptyTest = /^\s+$/;

* = 0 ou plus occurences,
+ = 1 ou plus occurences.

EDIT :
Désolé, la solution donnée est fausse !

[Bovino]

Code :

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

if (emptyTest.exec(document.addAppTypeForm.element[i].value) == null || document.addAppTypeForm.element[i].value=='')

Avec ton expression régulière initiale

Code :

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

var emptyTest = /^\s*$/;

[Sh4dow49]

J'ai essayé ta solution mais elle ne fonctionnait pas non plus

J'ai aussi essayé

Code :

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

if (emptyTest.exec(document.addAppTypeForm.elements[i].value) == null || emptyTest.exec(document.addAppTypeForm.elements[i].value) == '')

mais rien non plus

EDIT : J'ai réessayé avec element[i] au lieu de elements[i] et le formulaire s'envoie quand même cette fois (il ne s'envoyait jamais avec elements[i], il renvoyait tout le temps false, et la c'est l'inverse, tout le temps true)

[Sh4dow49]

Pour résumer voici ce que j'ai en ce moment (pour rappeler et peut-être mieux voir ce qui ne va pas) :

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
 
function validateForm()
{
	var errorsInForm = 0;
	var i;
	var emptyTest = /^\s*$/;
	var intTest = /^[0-9][0-9]?$/;
 
	//we look at the value of each element of the form
	for (i = 0; i < document.addAppTypeForm.length; i++)
	{
		//if the element is empty we add an error
		if (emptyTest.exec(document.addAppTypeForm.element[i].value) == null || document.addAppTypeForm.element[i].value == '')
		{
			errorsInForm++;
		}
		//else if the element is the field for the position we look at its value
		else if (document.addAppTypeForm.element[i] == document.addAppTypeForm.position)
		{
			//if its value is not only composed of numbers we add an error
			if (intTest.exec(document.addAppTypeForm.position.value) == null || document.addAppTypeForm.position.value == '')
			{
				errorsInForm++;
			}
		}
	}
 
	//if we have any error we return false
	if (errorsInForm > 0)
	{
		alert("You try to submit invalid informations (not a number for the position or an empty field).\nPlease retry.");
		return false;
	}
	//else we return true
	else
	{
		return true;
	}
}

et le formulaire qui va avec

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
 
<form method="post" action="addAppType.php" name="addAppTypeForm" onsubmit="return validateForm();" >
	<table>
		<tr>
			<td>Name : </td>
			<td><input type="text" name="appTypeName" maxlength="8" /></td>
		</tr>
		<tr>
			<td>Description : </td>
			<td><input type="text" name="appTypeDesc" maxlength="200" /></td>
		</tr>
		<tr>
			<td>Position : </td>
			<td><input type="text" name="position" size="2" maxlength="2" /></td>
		</tr>
		<tr>
			<td colspan="2" style="text-align:center;" ><input type="submit" value="Create" /></td>
		</tr>
	</table>
</form>

la fonction renvoie toujours true et ne fait plus qu'un tour de boucle (remarqué avec des alert, mais je ne sais pas pourquoi)



Egalement, pour le cas ou, quand doit-on mettre element[] et quand doit-on mettre elements[] ?

[Sh4dow49]

J'ai modifié le code de la fonction pour voir ce qui se passe (à l'aide d'alert) : voici le 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
function validateForm()
{
	var errorsInForm = 0;
	var i;
	var emptyTest = /^\s*$/;
	var intTest = /^[0-9][0-9]?$/;
	
	//we look at the value of each element of the form
	for (i = 0; i < document.addAppTypeForm.length-1; i++)
	{
		alert(document.addAppTypeForm.elements[i].name);
		//if the element is empty we add an error
		if (emptyTest.exec(document.addAppTypeForm.elements[i].value) == null || document.addAppTypeForm.elements[i].value == '')
		{
			alert("erreur texte");
			errorsInForm++;
		}
		//else if the element is the field for the position we look at its value
		else if (document.addAppTypeForm.elements[i] == document.addAppTypeForm.position)
		{
			alert("champ position");
			//if its value is not only composed of numbers we add an error
			if (intTest.exec(document.addAppTypeForm.position.value) == null || document.addAppTypeForm.position.value == '')
			{
				alert("erreur position");
				errorsInForm++;
			}
		}
	}
	alert(errorsInForm );
	//if we have any error we return false
	if (errorsInForm > 0)
	{
		alert("You try to submit invalid informations (not a number for the position or an empty field).\nPlease retry.");
		return false;
	}
	//else we return true
	else
	{
		return true;
	}
}

- le -i dans le for c'est pour ne pas traiter le bouton submit (qui fait parti des éléments du formulaire malgré tout)
- il me retourne bien les noms des trois champs, mais il me retourne erreur texte sur chacun des champs => le formulaire n'est pas envoyé car 3 erreurs

suite à la deuxième constatation j'ai essayé de faire le test sur le champ position avant l'autre test, ce coup ci il effectue bien le test position, mais affiche une erreur texte quand même sur les autres champs = changement, le formulaire est envoyé car il n'a pas gardé en mémoire les erreurs ...

Enfin j'ai essayé de ne pas mettre le else pour que les deux tests soient effectués sur le champ position, et la c'est un poil mieux il passe bien dans chaque champ correctement.


Ce que je ne comprends pas c'est que le test sur emptyTest échoue toujours, même quand je ne met pas d'espace ... (j'ai pourtant essayé de remplacer le * apr + dans la règle du test mais c'est pareil)

[Sh4dow49]

Trouvé !

En fait mettre

Code :

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

if (emptyTest.exec(document.addAppTypeForm.element[i].value) == null)

revient a dire si on n'a pas que des espaces ce qui fait qu'il ajoutait du coup tout le temps une erreur

J'ai donc mis != à la place de == et c'est bon