Discussion :

[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

[kev484]

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

Code :

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

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

[witch]

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 :

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

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

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

voilà

[kev484]

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

Code :

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

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 :

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

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

Code :

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

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?

[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+

[javatwister]

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

[kev484]

Pas de soucis :

Code :

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

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.

[E.Bzz]

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 :

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

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

A+

[kev484]

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 :

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

[E.Bzz]

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 ?

[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?

[E.Bzz]

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"

A+

[kev484]

Ok merci cela fonctionne.

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

[witch]

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 :

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

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

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

[E.Bzz]

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

Code :

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

onsubmit="return valide_formulaire();"

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

A+

[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
++