Control formulaire avec JS

**De Felger** · 07/04/2012, 22h47

Bonjour à tous,
Voila je viens de mettre en ligne mon site et je souhaiterais compléter le controle sur un formulaire.
En effet, je souhaiterais valider mon formulaire avec du js pour éviter qu'une personne ne mette n'importe quoi...Comment faire ?

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

re !!

bon, pour valider tes 3 champs, en js ça va être facile

tu récupères les name de tes champs

ensuite, dans ta balise <head>, tu mets :

Code :

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

1
2
3
4
5
6
7
 
function valider() {
var nimporteQuoi = document.nomDeTonFormulaire.nomDeTonName.value;
if ( nimporteQuoi == "") {
alert("rentrez le champs X");
}
}

ou sinon

Code :

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

1
2
3
4
5
6
 
function valider() {
if (document.nomDeTonFormulaire.nomDeTonName.value == "") {
alert("rentrez le champs X");
}
}

et dans ton submit tu rajoute un onclick="valider();"

teste avec un seul et tu fais pareil pour les autres..

**De Felger** · 07/04/2012, 22h59

Si je comprends bien, la je ne touche plus a mon fichier PHP mais je bosse sur le HTML...pour que ce soit bien clair ?

**De Felger** · 07/04/2012, 23h10

Comme cela ?

Code :

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

1
2
3
4
5
6
7
8
</script>
function valider() {
var nimporteQuoi = "$nom", "$message", "$email";
if ( nimporteQuoi == "") {
alert("rentrez le champs X");
}
}</head>
<body>

**De Felger** · 07/04/2012, 23h15

Et pour le submit comme ça ?

Code :

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

<input type="submit" onclick="valider();" name="search" value = "Envoyer" alt="Search" class="button" title="Subscribe" />

**oceane751** · 07/04/2012, 23h18

ah ui ui!!!
tu mets tout ça sur ta page html !

ah tiens pendant que j'y pense, mets ça dans tes <input>

Code :

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

1
2
 
onclick="this.value=''"

parce que sinon le mec qui valide, t'auras des "taper votre nom" etc qui vont apparaitre dans le mail envoyé!

MAIS
si le mec il rempli pas ton formulaire et qu'il laisse comme tel, en js ce qu'on fait c'est qu'on teste si la value est = ""
alors que dans ton formulaire ce ne sera jamais le cas car tu as mis des value non vide...

**De Felger** · 07/04/2012, 23h25

J'ai fait ce que tu m'as dit mais ça ne change rien je peux envoyer un message tout en complétant rien. Voici le code complet de ma page HTML:

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" type="image/png" href="images/favicon.png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vincent Dugré - Aménagement et Urbanisme</title>
<meta name="keywords" content="Aménagement, Urbanisme, Mission, Master ACT, SIG, déplacement, mobilité, concertation, territoire, collectivité, étude, licence, géographie, Rennes, Ille-et-Vilaine, Bretagne, Nantes" />
<meta name="description" content="Vincent Dugré - Chargé d'étude en Aménagement du Territoire - Urbanisme - Cet espace a pour objectif de vous présenter mon parcours universitaire, mes experiences professionnelles ainsi que les différents travaux réalisés au cours de mes stages et ateliers en lien avec ma formation." />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function clearText(field)
{
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
}
</script>
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-30606050-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
function valider() {
var nimporteQuoi = "$nom", "$message", "$email";
if ( nimporteQuoi == "") {
alert("rentrez le champs X");
}
}</head>
<body>
 
	<div id="templatemo_container">
    	<div id="templatmeo_header">
        	<div id="templatemo_menu">
            	<ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li><a href="index.html" class="current">Accueil</a></li>
                    <li><a href="cursus.html">Cursus</a></li>
                    <li><a href="experience.html">Expériences</a></li>
                    <li><a href="travaux.html">Travaux</a></li>
                    <li><a href="cartes.html">Outils</a></li>
                    <li><a href="voyages.html">Voyages</a></li>
                    <li><a href="liens.html">Liens</a></li>
                    <li><a href="http://amenagement-et-territoires.blogspot.fr/" target="blank">Le Blog</a></li>
                </ul> 
    </div>
 
            <div id="templatemo_logo_area">
            	<div id="templatemo_logo"></div>
            </div>
 
            <div class="templatemo_welcome">
            	<h1>Bienvenue sur mon site Web</h1>
                <p>Cet espace a pour objectif de vous présenter mon parcours universitaire, mes experiences professionnelles ainsi que les différents travaux réalisés au cours de mes stages et ateliers en lien avec ma formation. </p>
 
                <div class="templatemo_more">
                	<a href="#contact">Contact</a>
              </div>
                <div class="templatemo_more">
                	<a href="documents/CV - V.Dugré - Chargé d'Etude Aménagement - Urbanisme.pdf" target="_blank">C.V</a></div>
            </div>
        </div><!-- End Of header -->
 
        <div id="templatemo_content">
        	<div id="templatemo_content_top">
            	<div id="templatemo_content_bottom">
                	<div id="templaetmo_left">
                    	<div class="templatemo_one_col">
                        	<h1>Chargé d'étude en Aménagement-Urbanisme</h1>
                        	<div class="templatemo_h_line_2"><a href="../../index.html" target="_parent"><img src="images/templatemo_img_1.jpg" alt="Book" width="195" height="217" border="0" /></a>                            </div>
                       	  <p>Vous cherchez  un chargé de mission ou un assistant d'étude dans le domaine de l’aménagement et de l'urbanisme, réunissant des connaissances solides dans ce secteur, ainsi qu’une bonne maîtrise des outils informatiques, je vous propose mes services pour intégrer vos équipes de travail.</p>
                       	  <p>Mes compétences sont à l’origine de ma réussite en tant que chargé de mission à l’agence d’urbanisme de l’agglomération rennaise (AUDIAR) dans le cadre d'un atelier professionnel, ainsi qu’à la Direction Départementale des Territoires et de la Mer d’Ille-et-Vilaine (DDTM35).</p><p>Passionné par l’aménagement des territoires et l’urbanisme, je serais heureux d’intégrer vos services. En effet, les missions de mise en valeur des territoires, tout en respectant un développement durable, les relations avec de nombreux acteurs, les interventions sur le terrain, et l’approche avec différents domaines économiques, démographiques, et sociales, constituent les principales raisons qui me passionnent et m’attirent vers cette profession.</p>
                       	  <p>Vous trouverez le détail de mes compétences et des projets menés jusqu’ici dans les différentes rubriques thématiques de ce site.</p>
                       	  <p>Dans l’espérance d’avancer avec vous, je me tiens à votre entière disposition pour  tous renseignements complémentaires.</p><h2>Bonne visite</h2>
<div class="cleaner"></div>
 
                        </div>
               	    <div class="templaemo_h_line"></div>
               	    <div class="cleaner"></div>
                    </div><!-- End Of Left-->
<div id="templatemo_right2">
                    	<div id="templatemo_right_top2">                        
                        	<h1>Projets Récents</h1>
                        </div>     
                        <div id="templatemo_right_mid2">
                        	<div id="right_mid_top2">
                            <a href="https://docs.google.com/open?id=0B5Xx9wysNXBHeFNYU2xBZXZTQ3lJMVM5TWV4NWdYQQ" target="_blank" ><img src="images/templatemo_img_3.jpg" alt="City" width="260" height="89" /></a>
                                <a href="https://docs.google.com/open?id=0B5Xx9wysNXBHemhsQUlGajJUQkNmQXRCX2Z4SUVKUQ" target="_blank"><img src="images/templatemo_img_4.jpg" alt="Sunset" width="260" height="89" /></a>
                                <a href="https://docs.google.com/open?id=0B5Xx9wysNXBHS1RFTnVTb2hRSmFGY1pUN0ZoWXZOQQ" target="_blank"><img src="images/templatemo_img_5.jpg" alt="Beach" width="260" height="89" /></a>
                                <a href="#" target=""><img src="images/templatemo_img_6.jpg" alt="Beach" width="260" height="89" /></a></div>
                      </div>               
                        <div id="templatemo_right_bottom2">
                        </div>
                  </div><!-- End Of Right-->
 
                    <div class="cleaner"></div>
                </div><!-- End Of Content Bottom-->
            </div><!-- End Of Content Top-->
        </div><!-- End Of Content-->
    	<div id="templatemo_bottom_panel">
        	<div id="bottom_top">
<div class="templatemo_bottom_3_col">
       	<h1>Réseaux Professionnels</h1>
              <a href="http://fr.linkedin.com/pub/vincent-dugré/39/215/262" target="blank"><img src="images/templatemo_img_2.jpg" alt="Bug" /></a>
              <p>Si vous souhaitez intégrer mon réseau professionnel et suivre mon actualité, vous pouvez retrouver mon profil sur le réseau social Linked In.</p>
</div>
            	<div class="templatemo_bottom_3_col">
               	  <h1>Info Contact</h1>
                	<p>Tel: 06.84.78.11.07<br />
Adresse: 02 Rue Henri Collignon 35000 RENNES<br />
Email: vdugre@gmail.com<br />
Web: <a href="index.html" target="_parent">www.vincentdugre.webou.net</a></p>
</div>
 
                <div class="templatemo_bottom_3_col">
                <h1>Envoyez un mail<a name="contact" id="contact"></a></h1>
                	<form action="traitement_formulaire.php" method="post">
               	    <label class="labels">Nom:</label>
                        <div class="cleaner"></div>
               	  	    <input type="text" onclick="this.value=''" value="Tapez votre nom" name="fullname" class="field"  title="name" onfocus="clearText(this)" onblur="clearText(this)" id="fullname" />
                        <div class="cleaner"></div>
                        <label class="labels">Email:</label>
                        <div class="cleaner"></div>
                        <input type="text" onclick="this.value=''" value="Tapez votre adresse mail" name="email" class="field"  title="email" onfocus="clearText(this)" onblur="clearText(this)" />
                        <div class="cleaner"></div>
                        <label class="labels">Message:</label>
                   	  <div class="cleaner"></div>
                        <textarea name="message" cols="50" rows="3" class="text_area" title="message" onfocus="clearText(this)" onblur="clearText(this)">Tapez votre message</textarea>
               	      <input type="submit" onclick="valider();" name="search" value = "Envoyer" alt="Search" class="button" title="Subscribe" />
                	</form>
                </div>
                <div class="cleaner"></div>
 
            </div><!-- End Of bottom_top-->
        </div><!-- End Of templatemo_bottom_panel-->
        <div id="templatemo_bottom_bottom">
        </div>
 
        <div id="templatemo_footer">
        Copyright © 2012  | 
        Réalisé par <a href="index.html" target="_parent">Vincent Dugré</a> |
        Optimisé pour <a href="http://www.mozilla.org/fr/firefox/new/" target="blank">Mozilla Firefox</a> | documents upload en <a href="http://get.adobe.com/fr/reader/" target="blank">PDF</a> | Mis à jour: mars 2012</div>
    </div><!-- End Of Container -->
</body>
</html>

Control formulaire avec JS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager