Empecher envoi formulaire si y a erreur (formulaire simple)

**cinou01** · 27/11/2009, 21h59

Bonjour à tous!
Je reviens avec un nouveau pbm

!
Enfait j'ai un formulaire dont je veux verifier les informations dans un premier temps en javascript avant de l'envoyer au serveur. Pour le moment je peux faire soit l'un soit l'autre, mais pas les deux : je peux soit verifier les informaton saisies en javascript mais en mettant un

Code :

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

<form id="form_login" method="post" action="index.php?page=login" onsubmit="return false">

dans le formulaire pour empecher l'envoi, sinon quand je l'enleve, mon javascript ne se déclenche pas, et au mieux il se déclenche en affichant les erreurs mais il envoi quand meme la page au serveur (le action="maPage.html" est pris en compte).
J'utilise 2 fichiers séparé, un javascript et un html.

HTML

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
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>[ Connexion ]</title>
		<script src="controleLogin.js" type="text/javascript"></script>
		<body>
 
 
			<form id="form_login" method="post" action="index.php?page=login" onsubmit="return false">
 
				<label for="login">Login</label><br/><input id="login" type="text" name="login" /><br/><br/>
				<label for="mdp">Mot de passe</label><br/><input id="mdp" type="password" name="mdp" /><br/><br/>
				<input type="submit" value="Connexion" id="bouton" />
				<input type="hidden" name="validation" />
			</form>
 
			</form>
 
	   </body>
</html>

JavaScript

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
function manipDom() 
{ 
	var formulaire = document.getElementById("form_login");
	formulaire.addEventListener('submit',verif,'false');
}
 
function verif() 
{ 
	var formulaire = document.getElementById("form_login");
	var erreur="";
 
 
	//Login
	var regLogin=new RegExp("^[a-zA-Z0-9]{4,12}$","g");
	var login=document.getElementById("login").value;
	if (!regLogin.test(login))
	{
		erreur=erreur+'Format du login non valide\n';
	}
 
	//Mot de passe
	var regPass=new RegExp("^[a-zA-Z0-9]{6,12}$","g");
	var pass=document.getElementById("mdp").value;
	if (!regPass.test(pass))
		{
			erreur=erreur+'Format du mot de passe non valide\n';
		}
 
 
	if(erreur !="")
	{
		alert(erreur);
	}
	else
	{
		//window.open('index.php?page=inscription');
		//document.location.href="index.php?page=inscription" ;
		return true;
 
	}
 
 
 
}
 
window.addEventListener('load',manipDom,'false');

**SpaceFrog** · 28/11/2009, 14h16

Au lieu de faire un up interdit consulte plutot la FAQ et les contributions .

par exemple:
http://www.developpez.net/forums/d55...ght=valid+form

**cinou01** · 01/12/2009, 14h28

Merci

ps : dsl pr le up ..

**baggie** · 01/12/2009, 14h32

Je te donne ma solution qui m'a été donnée sur le forum aussi il n'y a pas longtemps !

Dans ta balise form tu mets :

Code :

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

onsubmit="javascript:return verification();"

Et ta fonction verification() va contrôler tes champs !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function verification()
{
	if(document.getElementById('nom_projet').value != "" || document.getElementById('client_projet').value != '-1')
    {
		return true;
    }
    else
    {
        document.getElementById("message").style.display = "block";
		document.getElementById("message").innerHTML = '<p class="rouge">Veuillez saisir un nom de projet et un client.</p>';
		return false;
    }
}

Ce n'est qu'un exemple mais ça peut peut-être te servir

**E.Bzz** · 01/12/2009, 14h43

Bonjour,

Envoyé par baggie

Ce n'est qu'un exemple mais ça peut peut-être te servir

peut être, mais avec quelques corrections :

pas de "javascript:" dans le code des évènements (ici onsubmit)
ta condition if() n'est pas cohérente avec le message d'erreur : la phrase devrait être

Veuillez saisir un nom de projet OU un client.

Sinon, il faut remplacer || par && dans la condition

A+

**cinou01** · 01/12/2009, 14h47

Mon probleme c'est que mon code javascript n'est pas dans ma page html. donc je peux pas faire un simple onsubmit="return verifier()" , parceque la fonction verifier() ne sera pads ds ma page html.

j'ai séparé html et javascript.

**baggie** · 01/12/2009, 14h50

Merci E.Bzz pour cette correction !

Pour ce qui est de mon message d'erreur :
- il faut que les deux champs soient complétés
- mais si je mets && et qu'un des deux remonte une erreur alors ça ne la renverra finalement pas (à cause du &&)
- cependant le message d'erreur doit bien dire à l'utilisateur que les deux champs doivent être remplis

cinou01 > et tu peux pas faire appel à ta page javascript avec src="" ?
(enfin il me semble que ça doit fonctionner)

**E.Bzz** · 01/12/2009, 14h51

Envoyé par cinou01

Mon probleme c'est que mon code javascript n'est pas dans ma page html.
....
j'ai séparé html et javascript.

Mais ça n'a aucun impact ...

Du coup, comment as-tu "Résolu" ton problème

A+

**cinou01** · 01/12/2009, 14h54

J'ai pas tester encore, mais je me suis la même chose que toi , ça n'aurait pas d'impact que le code js et html soit séparé ou pas. donc j'ai mis "resolu"

.

Je vais tester ça ttaleur!!

merci!

**cinou01** · 01/12/2009, 18h56

Finalement ça ne marche pas.
Il me dit qu'il y a une erreur, mais envoie quand même les données vers la page precisée dans le "action".

Voici mon JS: avec en gras et rouge le return de ma fonction

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 manipDom() 
{ 
	var formulaire = document.getElementById("form_login");
	formulaire.addEventListener('submit',verifLogin,'false');
}

function verifLogin() 
{ 
	var formulaire = document.getElementById("form_login");
	var erreur="";
	

	//Login
	var regLogin=new RegExp("^[a-zA-Z0-9]{4,12}$","g");
	var login=document.getElementById("login").value;
	if (!regLogin.test(login))
	{
		erreur=erreur+'Format du login non valide\n';
	}
	
	//Mot de passe
	var regPass=new RegExp("^[a-zA-Z0-9]{6,12}$","g");
	var pass=document.getElementById("mdp").value;
	if (!regPass.test(pass))
	{
		erreur=erreur+'Format du mot de passe non valide\n';
	}
	
	
	if(erreur !="")
	{
		return false;
	}
	else
	{
		return true;
	}
	
	
	
}
	
window.addEventListener('load',manipDom,'false');

Mon html, au cas où:

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
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>[ Connexion ]</title>
		<script src="controleLogin.js" type="text/javascript"></script>
		<body>


			<form id="form_login" method="post" action="index.php?page=login" onsubmit="return verifLogin()" />

				<label for="login">Login</label><br/><input id="login" type="text" name="login" /><br/><br/>
				<label for="mdp">Mot de passe</label><br/><input id="mdp" type="password" name="mdp" /><br/><br/>
				<input type="submit" value="Connexion" id="bouton" />
				<input type="hidden" name="validation" />
			</form>

			</form>

	   </body>
</html>