vérif champ formulaire rempli

Version imprimable

06/04/2012, 23h11
mathier

vérif champ formulaire rempli
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:

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:

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:

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
07/04/2012, 00h01
oceane751
Code:

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...

et ça

Code:

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

c'est dans ta fonction?

07/04/2012, 08h55
mathier

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
07/04/2012, 08h56
mathier

rectification
pour var iddutruc et var letruc

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:

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

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

Code:

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:

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"/>

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

Code:

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 :cry:

déjà c'est ça :
Code:

1 2 alert('le formulaire n\'est pas rempli entièrement');
et pas ça :
Code:

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

et perso j'aurai fait plus ça :

Code:

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...

si tu veux vraiment utiliser ta technique
essayes ça :
Code:

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

merci pour l'aide

j'ai fait les motif

Code:

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

07/04/2012, 19h49
oceane751

ça c'est non

Code:

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

ça c'est oui !

Code:

<link rel="stylesheet" href="feuillestyle.css" />
07/04/2012, 22h27
mathier

ç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"
07/04/2012, 22h33
oceane751

:ccool:

problème résolu alors :aie: