vérif champ formulaire rempli

**mathier** · 06/04/2012, 23h11

bonjour
je cherche à vérifier grâce à une fonction action() que le champ d'un formulaire a été rempli
j'ai donc besoin d'accéder au contenu du formulaire pour vérifier qu'il n'est pas vide avec la fonction affiche()

je vous livre mes bouts de code

le champ du formulaire avec le bouton envoi

Code :

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

1
2
3
<label for="truc" id="truc">truc: </label>
<input type="text" id="truc" name="truc"/>
<input onclick="action()" type="submit" value="envoyer"/>

la fonction

Code :

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

1
2
3
4
5
function affiche(){
	if (letruc=""){
	alert('le formulaire n'est pas rempli ');
	}
}

la récupération du contenu du formulaire en javacript

Code :

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

1
2
var iddutruc = document.getElementById('truc')
var letruc = iddutruc.value;

ça ne fonctionne pas et je ne comprends pas mon erreur pourriez vous m'expliquez le pb svp ?

merci

**oceane751** · 07/04/2012, 00h01

Code :

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

1
2
3
4
 
if (document.getElementById("truc").value="") {
alert("pas rempli");
}

par contre un "id" est unique, donc tu ne peux pas l'utiliser 2 fois...
donc je pense que ça ne va pas marcher...

**oceane751** · 07/04/2012, 00h02

et ça

Code :

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

1
2
var iddutruc = document.getElementById('truc')
var letruc = iddutruc.value;

c'est dans ta fonction?

**mathier** · 07/04/2012, 08h55

bonjour
pour le id je donne des noms différents pour chaque input du formulaire donc ça devrait ne pas poser pb

pour var=idtruc et var =truc non ce n'est pas dans la fonction
je crée ces variables pour pointer le id puis pour récupérer ce que l'utilisateur écrit et ensuite j'appelle la fonction affiche() où je vérifie si ces variables ne sont pas vides

**mathier** · 07/04/2012, 08h56

rectification
pour var iddutruc et var letruc

**mathier** · 07/04/2012, 09h13

pour être plus clair voilà un code complet que j'ai rédigé:
j'ai donc 3 champs nom, prénom, âge . En cliquant sur envoi j'aimerais que l'utilisateur ait une boite de dialogue lui indiquant que le formulaire est incomplet s'il n'a pas rempli les 3 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
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
 
<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8"/>
		<title>essai site </title>
		<link rel="stylesheet"href="feuillestyle.css"
		<script type="text/javascript">
			function affiche(){
				if (lenom=="" && leprenom=="" && lage==""){
				alert('le formulaire n'est pas rempli entièrement');
				}
			}
		</script>
	</head>
 
	<body>
 
		<form method="post"action="fichierphp.php">
			<label for="nom" id="lenom"> Nom: </label>
			<input type="text" id="nom" name="nom"/>
			<br/>
			<label for="prenom" id="leprenom"> Prénom: </label>
			<input type="text" id="prenom" name="prenom"/>
			<br/>
			<label for="age" id="lage"> Age: </label>
			<input type="text" id="age" name="age"/>
			<br/>
			<input onclick="affiche()" type="submit" value="envoyer"/>
		</form>
 
		<script type="text/javascript">
			var idnom = document.getElementById('lenom')
			var lenom = idnom.value;
			var idleprenom = document.getElementById('leprenom');
			var leprenom = idleprenom.value;
			var idlage = document.getElementById('lage');
			var lage = idlage.value;
			affiche();
		</script>
 
	</body>
 
</html>

merci

**oceane751** · 07/04/2012, 15h41

t'es obligé d'inclure la déclaration de variable

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function affiche(){
			var truc = document.getElementById('truc').value;
			if (truc == ""){
			   alert("le formulaire n'est pas rempli ");
			}
			else {
			alert("rempli");	
			}
    	}

et si tu en as besoin pour autre chose, tu la re déclare!

avec

Code :

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

1
2
3
4
 
<label for="truc" id="nn">truc: </label>
<input type="text" id="truc" name="truc" value=""/>
<input onclick="affiche()" type="submit" value="envoyer"/>

**mathier** · 07/04/2012, 16h36

j'ai tenu compte de vos remarques ... je pense ... en faisant:

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
 
<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8"/>
		<title>essai site </title>
		<link rel="stylesheet"href="feuillestyle.css"
		<script type="text/javascript">
			function affiche(){
				var idnom = document.getElementById('nom');
				var valeurnom = idnom.value;
				var idleprenom = document.getElementById('prenom');
				var valeurprenom = idleprenom.value;
				var idlage = document.getElementById('age');
				var valeurage = idlage.value;
 
				if (valeurnom=="" && valeurprenom=="" && valeurage==""){
				alert('le formulaire n'est pas rempli entièrement');
				}
			}
		</script>
	</head>
 
	<body>
 
		<form method="post" action="fichierphp.php">
			<label for="nom" id="lenom"> Nom: </label>
			<input type="text" id="nom" name="nom" value=""/>
			<br/>
			<label for="prenom" id="leprenom"> Prénom: </label>
			<input type="text" id="prenom" name="prenom" value="" />
			<br/>
			<label for="age" id="lage"> Age: </label>
			<input type="text" id="age" name="age" value=""/>
			<br/>
			<input onclick="affiche()" type="submit" value="envoyer"/>
		</form>
 
 
	</body>
 
</html>

mais c'est tus un échec

**oceane751** · 07/04/2012, 17h16

déjà c'est ça :

Code :

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

1
2
 
alert('le formulaire n\'est pas rempli entièrement');

et pas ça :

Code :

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

1
2
 
alert('le formulaire n'est pas rempli entièrement');

Je continue à tester

**oceane751** · 07/04/2012, 17h22

et perso j'aurai fait plus ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
if (valeurnom =="" )
				{
				alert('le nom n\'est pas rempli entièrement');
				}
				if(valeurprenom == "") {
					alert('le prenom n\'est pas rempli entièrement');
				}
				if(valeurage == "") {
					alert('age n\'est pas rempli entièrement');
				}

comme ça tu donnes plus d'indications à l'utilisateur...

**oceane751** · 07/04/2012, 17h25

si tu veux vraiment utiliser ta technique
essayes ça :

Code :

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

1
2
3
4
5
 
if ( (valeurnom =="" ) || (valeurprenom == "") || (valeurage == "")) 
				{
				alert('pas rempli');
				}

&& = et
|| = ou

**mathier** · 07/04/2012, 19h28

merci pour l'aide

j'ai fait les motif

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
 
<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8"/>
		<title>essai site </title>
		<link rel="stylesheet"href="feuillestyle.css"
		<script type="text/javascript">
			function affiche(){
				var idnom = document.getElementById('nom');
				var valeurnom = idnom.value;
				var idleprenom = document.getElementById('prenom');
				var valeurprenom = idleprenom.value;
				var idlage = document.getElementById('age');
				var valeurage = idlage.value;
 
				if ((valeurnom=="")|| (valeurprenom=="") || (valeurage=="")){
				alert('le formulaire n\'est pas rempli entièrement');
				}
			}
		</script>
	</head>
 
	<body>
 
		<form method="post" action="fichierphp.php">
			<label for="nom" id="lenom"> Nom: </label>
			<input type="text" id="nom" name="nom" value=""/>
			<br/>
			<label for="prenom" id="leprenom"> Prénom: </label>
			<input type="text" id="prenom" name="prenom" value="" />
			<br/>
			<label for="age" id="lage"> Age: </label>
			<input type="text" id="age" name="age" value=""/>
			<br/>
			<input onclick="affiche()" type="submit" value="envoyer"/>
		</form>
 
 
	</body>
 
</html>

et tjs rien , j'ai carrément le contenu de la fonction qui s'affiche avant le formulaire

je m'entête avec ma façon de faire car pour moi ce code devrait fonctionner et si je vois pas ce qui cloche je serai tjs aussi nul en javascript

PS: je suis sous mac, au cas où ça changerait une donnée

merci

**oceane751** · 07/04/2012, 19h49

ça c'est non

Code :

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

<link rel="stylesheet"href="feuillestyle.css"

ça c'est oui !

Code :

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

<link rel="stylesheet" href="feuillestyle.css" />

**mathier** · 07/04/2012, 22h27

ça fonctionne merci j'avoue que je n'y croyais plus trop

quand j'ai ajouté ce "/>" oubli stupide dans <link> je ne pensais pas que ça allait résoudre quoique ce soit ... d'autant plus que je n'avais pas associé de feuille de style

je ne comprends d'ailleurs pas pourquoi le navigateur affichait le code contenu dans la balise <script> (car le code de la fonction) avec cet oubli étant donné que le contenu de cette balise était correcte et bien "balisée"

**oceane751** · 07/04/2012, 22h33

problème résolu alors

vérif champ formulaire rempli

JavaScript

Discussions similaires

Partager

Partager