Vérification de formulaire

**Allanou** · 01/04/2008, 15h21

Bonjour à tous,

je débute en JS, j'ai récupérer par ci et par la des vérifications de formulaire pour me donner une idée puis j'en ai fait un a ma sauce.

J'ai un problème, le JS vérifie tous les champs, mais quand tous les champs sont correct, il n'envoie pas le formulaire...

Je vous colle le code source, si vous pouvez me trouver une solution ça serais vraiment gentil car je ne comprend vraiment pas ....

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
function FormVerifeIC(index_connection) {
    if (!FormAllVerifeIC(index_connection.TB_index_pseudo) || FormAllVerifeIC(index_connection.TB_index_mdp)) {
        return false;
    }
    else {
        index_connection.submit();
        return true;
    }
}
function FormAllVerifeIC(input) {
    if (input.value == null || input.value.length == 0) {
        input.style.backgroundColor = "#ff7373"; 
    }
    var str = input.value;
    for (var i = 0; i < str.length;i++){
        var ch = str.substring(i,i+1);
        if ( ch == " ") {
            input.style.backgroundColor = "#ff7373"; 
        }
        else {
            input.style.backgroundColor = "#9fd69c";       
            return true;
        }
    }
    return true;
}

HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
        <form name="index_connection" action="index.php5?p=11" method="post">
        <p>
        <label for="pseudo">Pseudo</label><br /><input type="text" name="TB_index_pseudo" id="pseudo" class="champ" onkeyup="Clavier(event)" />
        <label for="mdp">Mot de passe</label><br /><input type="password" name="TB_index_mdp" id="mdp" class="champ" onkeyup="Clavier(event)" /><br />
        <input type="button" name="BT_index_ident" value="Se Connecter" onClick="FormVerifeIC(this.form)" />
        <a href="index.php5?p=10">Inscription</a>
        <br />
        <a href="index.php5?p=11&MdpP=1" name="url">Mot de passe perdu</a>
        </p>
        </form>

J'ai mit aussi une vérification de la touche entrer dans les input qui fonctionne correctement, donc je ne l'ai pas coller.

Merci par avance de votre aide, à bientôt.

G.Allan

**SpaceFrog** · 01/04/2008, 15h24

tu n'as pas du bein etudier les scripts de verification d'un form ...

la fonction retourne true ou false jusque là c'es bon ...

mais l'appel de la focntion se fait sur le onsubmit du form ...

Code :

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

<form ... onsubmit="return mafonctionVerfi()" >

**Allanou** · 01/04/2008, 15h33

Merci pour ta réponse SpaceFrog.

Je viens d'essayer ce que tu viens de me dire mais ça ne marche toujours pas

Le JS ne s'exécute pas ...

G.Allan

**SpaceFrog** · 01/04/2008, 15h47

remplace

Code :

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

<input type="button" name="BT_index_ident" value="Se Connecter" onClick="FormVerifeIC(this.form)" />

par

Code :

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

<input submit="button" name="BT_index_ident" value="Se Connecter" />

**Allanou** · 01/04/2008, 15h55

Je viens d'essayer, le bouton n'est plus un bouton mais un champ de texte... et ça ne fonctionne toujours pas

G.Allan

**SpaceFrog** · 01/04/2008, 16h00

desolé

Code :

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

1
2
 
<input type="submit" name="BT_index_ident" value="Se Connecter" />

mes plus plates confuses ... je fatigue ...

**Allanou** · 01/04/2008, 16h11

Y a pas de problème.

Je n'est pas mit le type="submit" car sa envoie les informations même s'il y a une erreur sur les champs ... (je viens de ressayer c'est pareil...)

En faisant avec type="button" sa vérifie puis si c'est correct ça envoie normalement... (avec un autre script JS ça fonctionne mais pas avec le mien ...)

G.Allan

**SpaceFrog** · 01/04/2008, 16h30

justement !!!!!!

il faut mettre un bouton submit ...

c'est le :

Code :

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

onsubmit='return verif()'

qui bloque ou non l'envoi du formulaire ...
si avec ça ton formulaire est envoyé tout le temps, c'est que ta fonction verfi ne fait ps son boulot !

la preuve:

Code :

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

1
2
3
<form action="javascript:alert('envoyé')" onsubmit="return confirm('voulez vous envoyer?');" />
<input type='submit' value='go' />
</form>

**Allanou** · 01/04/2008, 16h40

Je viens de faire quelques modification notamment sur le bouton en type submit et sur le form le onsubmit, le JS vérifie les champs si c'est tout bon ça ne transmet pas a la page php...

Voici les modifications effectuer

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<form name="index_connection" onsubmit="return(FormVerifeIC());" action="index.php5?p=11" method="post">
		<p>
		<label for="pseudo">Pseudo</label><br /><input type="text" name="TB_index_pseudo" id="pseudo" class="champ" onkeyup="Clavier(event)" />
		<label for="mdp">Mot de passe</label><br /><input type="password" name="TB_index_mdp" id="mdp" class="champ" onkeyup="Clavier(event)" /><br />
		<input type="submit" name="BT_index_ident" value="Se Connecter" />
		<a href="index.php5?p=10">Inscription</a>
		<br />
		<a href="index.php5?p=11&MdpP=1" name="url">Mot de passe perdu</a>
		</p>
		</form>

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
 
function FormVerifeIC() {
	if (!FormAllVerifeIC(index_connection.TB_index_pseudo) || FormAllVerifeIC(index_connection.TB_index_mdp)) {
		return false;
	}
	else {
		index_connection.submit();
		return true;
	}
}
function FormAllVerifeIC(input) {
	if (input.value == null || input.value.length == 0) {
		input.style.backgroundColor = "#ff7373";  
	}
	var str = input.value;
	for (var i = 0; i < str.length;i++){
		var ch = str.substring(i,i+1);
		if ( ch == " ") {
			input.style.backgroundColor = "#ff7373";  
		}
		else {
			input.style.backgroundColor = "#9fd69c";		
			return true;
		}
	}
	return true;
}

Je pense que le problème viens du JS...
Aidez moi le JS ma trop prit la tête

G.Allan

**SpaceFrog** · 01/04/2008, 16h45

Code :

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

onsubmit="return FormVerifeIC();"

sans les parenthèses

et pas de soumision de form dasn la focntion de vérif !!!!

Code :

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

index_connection.submit();

la fonction doit juste retourner true ou false !!!

**Allanou** · 01/04/2008, 16h55

Je viens de faire les modifications que tu viens de m'indiquer, mais le formulaire ne se transmet toujours pas...

J'ai mit une alert("OK"); a la place de index_connection.submit(); et ça ne l'affiche pas le message OK...

même sans l'alert le formulaire ne transmet pas les données...

G.Allan

**SpaceFrog** · 01/04/2008, 17h02

c'est que ta focntion javascript ne retourne pas ce qu'il faut !!!

Un exemple un peu plus parlant peut être :

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
 
<script type='text/javascript'>
function verif(ObjForm){
 
var flag=(ObjForm.elements('one').value.length>0)?true:false;
 
alert(flag?'tout va bien':'il reste des erreurs');
return flag;
 
}
</script>
 
</head>
 
<body>
<form action="javascript:alert('envoyé')" onsubmit="return verif(this);" />
<input type='text' name='one' />
<input type='submit' value='go' />
</form>
</body>
 
</html>

**Allanou** · 01/04/2008, 17h23

Je viens d'y arriver !! Merci beaucoup de ton aide !!!!

J'ai maintenant un petit problème par apport au changement de couleur d'arrière plant, a cause du return false; la couleur ne se change qu'a un champ....

Je voudrais que la couleur d'arrière plant se change a tous les champs où se trouve l'erreur, peux-tu m'aider ?

Voici le code source:

HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
		<form name="index_connection" onsubmit="return FormVerifeIC();" action="index.php5?p=11" method="post">
		<p>
		<label for="pseudo">Pseudo</label><br /><input type="text" name="TB_index_pseudo" id="pseudo" class="champ" />
		<label for="mdp">Mot de passe</label><br /><input type="password" name="TB_index_mdp" id="mdp" class="champ" /><br />
		<input type="submit" name="BT_index_ident" value="Se Connecter" />
		<a href="index.php5?p=10">Inscription</a>
		<br />
		<a href="index.php5?p=11&MdpP=1" name="url">Mot de passe perdu</a>
		</p>
		</form>

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
 
function FormVerifeIC() {
	if (!FormAllVerifeIC(document.index_connection.TB_index_pseudo) || !FormAllVerifeIC(document.index_connection.TB_index_mdp)) {
		return false;
	}
	else {
		return true;
	}
}
function FormAllVerifeIC(input) {
	if (input.value == null || input.value.length == 0) {
		input.style.backgroundColor = "#ff7373";  
		return false;
	}
	var str = input.value;
	for (var i = 0; i < str.length;i++){
		var ch = str.substring(i,i+1);
		if ( ch == " ") {
			input.style.backgroundColor = "#ff7373";  
			return false;
		}
		else {
			input.style.backgroundColor = "#9fd69c";		
			return true;
		}
	}
	return true;
}

Merci encore

G.Allan

**SpaceFrog** · 01/04/2008, 17h27

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
function FormVerifeIC() {
	if (!FormAllVerifeIC(document.index_connection.TB_index_pseudo) || !FormAllVerifeIC(document.index_connection.TB_index_mdp)) {
		return false;
	}
	else {
		return  true;
	}
 
}
 
function FormAllVerifeIC(input) {
var flag=true;
	if (input.value == null || input.value.length == 0) {
		input.style.backgroundColor = "#ff7373";  
		flag= false;
	}
	var str = input.value;
	for (var i = 0; i < str.length;i++){
		var ch = str.substring(i,i+1);
		if ( ch == " ") {
			input.style.backgroundColor = "#ff7373";  
			flag= false;
		}
		else {
			input.style.backgroundColor = "#9fd69c";		
			flag= true;
		}
	}
	return flag;
}

**Allanou** · 01/04/2008, 17h34

Ton code source ne résous pas le problème d'arrière plant...
Il y a toujours le même problème l'arrière plant se change qu'a un seule champ

G.Allan

**SpaceFrog** · 01/04/2008, 17h38

j'ai modifié le code ci dessus le flag doit etre dans la seconde fonction

**Allanou** · 01/04/2008, 17h44

Bin j'ai Copier/Coller ton Code Source mais il y a toujours le même problème ... l'arrière plant ne se met pas a tous les champs où se trouve l'erreur

G.Allan

**SpaceFrog** · 01/04/2008, 17h46

dans la conception de ta focntion de vérification ...

**Allanou** · 01/04/2008, 18h10

Je n'es pas compris...

G.Allan

**SpaceFrog** · 02/04/2008, 09h17

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
 
function FormAllVerifeIC(input) {
var flag=0;
	if (input.value == null || input.value.length == 0) {
		input.style.backgroundColor = "#ff7373";  
		flag++;
	}
	var str = input.value;
	for (var i = 0; i < str.length;i++){
		var ch = str.substring(i,i+1);
		if ( ch == " ") {
			input.style.backgroundColor = "#ff7373";  
			flag=++;
		}
		else {
			input.style.backgroundColor = "#9fd69c";		
 
		}
	}
	return (flag==0)?true:false;
}

Vérification de formulaire

JavaScript

Discussions similaires

Partager

Partager