Ecrire un texte lors du rechargement

Version imprimable

10/01/2008, 17h16
kev484

Ecrire un texte lors du rechargement

Bonjour, j'ai un formulaire ou des champs sont obligatoires a remplir. Sachant que j'ai deja des alert() j'aimerai créer une fonctionqui permet lorsque l'utilisateur a valider mais qu'il à oublié des champs que mon formulaire reaparaisse mais que dans les champs oublié appraissent " Ce champ est obligatoire". Je pensais au onfocus mais ça ne peut pas fonctionner.
Merci
10/01/2008, 18h07
kev484

J'ai essayé ceci mais cela ne fonctionne pas.

Code:

<input type="text" name="mail" id="mail" onchange="this.value='Ce champ est obligatoire'"; />*

Salut,
ben c'est simple, t'ajoutes un div avec un id qui va contenir le message pour après avoir verifier la valeur du champs est ce vide ou pas,

une simple fonction JS
Code:

1 2 3 4 5 6 7 8 9 10 11 function verif() { if(document.forms['f'].elements['txt'].value=="") { document.getElementById('message').innerHTML="ce champs est vraiment obligatoire"; } else { document.getElementById('message').innerHTML="ben non "; } }
et un formulaire pour tester...

Citation:

<form name="f">
<input type="text" name="txt" onchange="verif();"/>
</form>
<div id='message'></div>

voilà :)

Mon probleme n'est pas resolu lors du rechargement d ela page il n'affiche pas le message :
Code:

1 2 3 4 5 6 7 8 9 10 11 function verif() { if(document.forms['f'].elements['mail'].value=="") { document.getElementById('message').innerHTML="ce champs est obligatoire"; } else { document.getElementById('message').innerHTML="ben non "; } }
Code:

<form action="formulaire.php" enctype="multipart/form-data" method="post" onsubmit="return valide_formulaire()" name="f">
Code:

1 2 3 4 5 <p> <label for="mail">Votre adresse mail : </label> <input type="text" name="mail" id="mail" onchange="verif();" />* <div id='message'></div> </p>
Je ne comprends pas pourquoi mettre le div apres le form?

11/01/2008, 12h03
E.Bzz

Bonjour,
j'ai l'impression que le problème vient du fait que le form est soumis même en cas d'erreur (d'où le RAZ des champs dû au rechargement de la page).
La fonction valide_formulaire() ne fonctionne peut être pas correctement.
Peut-on la voir ?

A+

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
 
function verif(m){
	document.getElementById("message").style.display= !m.value ? "block" : "none";
	return !m.value ? false : true
}
 
</script>
 
 
<form id="f" action="" onsubmit="return verif(this.elements['mail'])">
	<p>  
		<div id="message" style="display:none;color:red">Ce champ est obligatoire.</div> 
		<label for="mail">Votre adresse mail : </label>
		<input type="text" name="mail" id="mail" />
	</p>
</form>

Pas de soucis :

Code:

1
2
3
4
5
6
7
8
9
10
11
function valide_formulaire() {
    if(document.getElementById('login').value == "") {
        alert ('Vous avez oublié de saisir un login!!!!');
        return false;
    }
    else if(document.getElementById('pwd').value == "") {
        alert ('Vous avez oublié de saisir un mot de passe!!!!');
        return false;
    }
return true;
}

Cela fonction bien car les massage d'alert s'affichent.

Citation:

Envoyé par kev484

Bonjour, j'ai un formulaire ou des champs sont obligatoires a remplir. Sachant que j'ai deja des alert() j'aimerai créer une fonctionqui permet lorsque l'utilisateur a valider mais qu'il à oublié des champs que mon formulaire reaparaisse mais que dans les champs oublié appraissent " Ce champ est obligatoire". Je pensais au onfocus mais ça ne peut pas fonctionner.
Merci

Si ton onsubmit fonctionne (pas de submit si un champ pas rempli), pourquoi veux-tu que le form "réapparaisse" : il n'a pas disparu (sinon il y a eu submit).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function valide_formulaire() { if(document.getElementById('login').value == "") { alert ('Vous avez oublié de saisir un login!!!!'); document.getElementById('login').value = "Ce champ est obligatoire"; return false; } else if(document.getElementById('pwd').value == "") { alert ('Vous avez oublié de saisir un mot de passe!!!!'); document.getElementById('pwd').value = "Ce champ est obligatoire"; return false; } return true; }
Pour pwd le résultat n'est pas garanti :mrgreen:

A+

En fait ce que je voudrait c'est que, ce soit pour mail que le message apparaisse. Car avec les alert c'est bon l'utilisateur comprend. Voila tout mon code :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!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>
  <title>Formulaire d'inscription</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="formulaire.css"  type="text/css" />
  <script src="formulaire.js" type="text/javascript"></script>
 
 
</head> 
<body onload="pratique_update()">
<h1>Les données à remplir sont les suivantes : </h1>
<form action="formulaire.php" enctype="multipart/form-data" method="post" onsubmit="return valide_formulaire()" >
  <fieldset>
  <legend>Connexion</legend>
  <p>
    <label for="login">Choisissez un login : </label>
    <input type="text" name="login" id="login" maxlength="20" />*
  </p>
  <p>
    <label for="pwd">Choisissez votre mot de passe : </label>
    <input type="password" name="pwd" id="pwd" />*
  </p>
 
  </fieldset>
  <fieldset>
  <legend>Coordonnées personnels</legend>
  <p>
    <label for="nom">Entrez votre Nom : </label>
    <input type="text" name="nom" id="nom" />
  </p>
  <p>
    <label for="prenom">Entrez votre Prenom : </label>
    <input type="text" name="prenom" id="prenom" />
  </p>
  <p>  
    <label for="age">Entrez votre Age : </label>
    <input type="text" name="age" id="age" onkeypress="chiffres(event)" />*
  </p>
  <p>  
    <label for="mail">Votre adresse mail : </label>
    <input type="text" name="mail" id="mail" />*
  <div id='message'></div> 
  </p>
  <p>
    <label for="adresse">Entrez votre Adresse : </label>
    <input type="text" name="adresse" id="adresse" />
  </p>
  <p>  
    <label for="ville">Entrez votre Ville : </label>
    <input type="text" name="ville" id="ville" />
  </p>
  <p>  
    <label for="code">Entrez votre code postal : </label>
    <input type="text" name="code" id="code" />
  </p>
 
  </fieldset>
  <fieldset>
  <legend>Vous et le rugby</legend>
  <div>
	Pratiquez-vous le rugby :
	<input type="radio" name="pratique" id="pratique_oui" value="oui"  onclick="pratique_update()" />
	<label for="pratique_oui">Oui</label>
	<input type="radio" name="pratique" id="pratique_non" value="non" checked="checked" onclick="pratique_update()" />
	<label for="pratique_non">Non</label>
  </div>
  <div id="pratique_details">
	<div>
	  <label for="ok">Dans quelle club ?</label>
  	<input type="text" name="ok" id="ok" />
	</div>
 
      </div>
  <p>
    <label for="club">Quel club supportez-vous ? </label>
    <input type="text" name="club" id="club" />
  </p>
  </fieldset>
  <div class="obligatoire"> *  Champs obligatoires</div>
  <div><input type="submit" value="Valider" /></div>
</form>
</body>
</html>

En fait je pense qu'il faudrait integrer la fonction pour le mail dans "verif_formulaire()" non?

11/01/2008, 12h28
E.Bzz

Citation:

Envoyé par kev484

En fait je pense qu'il faudrait integrer la fonction pour le mail dans "verif_formulaire()" non?

Heu ... c'est pas ce que j'ai fait ?
11/01/2008, 12h31
kev484

Ba ce que vous vous avez fait c'est pour les input ayant comme name : pwd et login. C'est champs ayant deja des alert, c'est pour name=mail que je souhaiterai mettre le message car avec le php si il ne rentre pas de mail alors il est redirigé vers le formulaire. Est-ce plus comprehensible?
11/01/2008, 12h34
E.Bzz

Citation:

Envoyé par kev484

Ba ce que vous vous avez fait c'est pour les input ayant comme name : pwd et login. C'est champs ayant deja des alert, c'est pour name=mail que je souhaiterai mettre le message car avec le php si il ne rentre pas de mail alors il est redirigé vers le formulaire. Est-ce plus comprehensible?

Heu ... là c'est du copié/collé.
Je suppose que tu sauras ensuite modifier le mot "login" en "mail" :mrgreen:

A+

Ok merci cela fonctionne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function valide_formulaire() {
    if(document.getElementById('login').value == "") {
        alert ('Vous avez oublié de saisir un login!!!!');
        return false;
    }
    else if(document.getElementById('pwd').value == "") {
        alert ('Vous avez oublié de saisir un mot de passe!!!!');
        return false;
    }
    else if(document.getElementById('mail').value == "") {
        document.getElementById('mail').value = "Ce champ est obligatoire";
        return false;
    }
return true;
}

Merci beaucoup de vos aides.

Salut,
je voulais juste dire que le onsubmit, c'est onsumbit lol, enfin c'est comme l'event click mais plus spécial, je ne poste pas ce message pour exliquer ce que c'est le onsubmit,
mais vu que tu utilises le return false à chaque fois....pour moi je viens de tester, ça passe dans tout les cas, sinon si je fais un return false après l'appel de la fonction ça bloque l'action de rediriger, sinon ça redirige même avec un return false qui se trouve dans la fonction!
voilà, comment je résous ce probleme
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 function valide_formulaire() { if( document.getElementById('login').value=="") document.getElementById('msg1').innerHTML="login oublié!!"; else if (document.getElementById('pwd').value =="") document.getElementById('msg2').innerHTML="pass oublié!!"; else if (document.getElementById('mail').value =="") document.getElementById('msg3').innerHTML="email oublié!!"; else { document.getElementById('message').innerHTML="okie "; document.forms['f'].action="radio.html"; document.forms['f'].target="_self"; document.forms['f'].submit(); } }
le formulaire :
Code:

1 2 3 4 5 6 7 <form name="f" action="radio.html" onsubmit="valide_formulaire();return false;"> Login :<input type="text" id="login" /><div id='msg1'></div><br /> Pass :<input type="text" id="pwd" /><div id='msg2'></div><br /> Email :<input type="text" id="mail" /><div id='msg3'></div> <input type="submit" value="test" /> </form> <div id='message'></div>
ben j'ai changé les alerts par des innerHTML, sinon tu peux utiliser des alerts si tu veux

j'espere que ça t'aidera

a++

14/01/2008, 15h38
E.Bzz

Citation:

Envoyé par witch17

je voulais juste dire que le onsubmit, c'est onsumbit lol, enfin c'est comme l'event click mais plus spécial, je ne poste pas ce message pour exliquer ce que c'est le onsubmit,

Oui ... mais non :mrgreen:

Code:

onsubmit="return valide_formulaire();"

sinon ce n'est pas la peine de gérer un onsubmit ...

A+
14/01/2008, 17h26
witch

Oui clair
chacun trouve la solution qui lui convient, selon ce qu'il sait faire, moi je faisais ainsi, mais bon c'est clair le bout de code que t'as envoyé ;)
Merci
++