Discussion :

[imenfatma]

Bonjour, comment réaliser un test simple sur les champs de formulaires avec jquery ? Voici mon formulaire :

Code html :

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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<div id="content">
		<div class="post">
			<h1 class="title">Formulaire d'inscription</h1>
			<div class="entry">
            Les champs marqu&eacute;s <span class="asterix">*</span> doivent obligatoirement &ecirc;tre renseign&eacute;s
<form name="inscription" method="post" action="valid.php">
<fieldset>
            <legend>Informations personnelles</legend>
            <table width="100%">
            <tr>
            <td width="35%">Civilit&eacute;<span class="asterix">*</span>:</td> 
            <td>
<input type="radio" name="civilite" value="Monsieur"    />Monsieur
<input type="radio" name="civilite" value="Madame" />Madame
<input type="radio" name="civilite" value="Mademoiselle" />Mademoiselle			</td>
            </tr>
			<tr>
            <td>Nom<span class="asterix">*</span>:</td> 
            <td><input name="nom" type="text" /></td>
			</tr>
            <tr>
            <td>Pr&eacute;nom<span class="asterix">*</span>:</td>
            <td><input type="text" name="prenom" /></td>
            </tr>
            <tr>
            <td>Institution ou organisme<span class="asterix">*</span>:</td>
            <td><input name="inst" type="text" value="" /></td>
            </tr>
            <tr>
            <td>e-Mail<span class="asterix">*</span>:</td>
            <td><input type="text" name="mail" /></td>
            </tr>
            <tr>
            <td>Tel<span class="asterix">*</span>:</td> 
            <td><input type="text" name="tel" /></td>
            </tr>
            <tr>
            <td>Participant<span class="asterix">*</span>:</td>
            <td>
            <input type="radio" name="nation" value="Tunisien" checked="checked" />
Tunisien 
<input type="radio" name="nation" value="Etranger" />
Etranger			</td>
            </tr>
            </table>
</fieldset>
 
<fieldset>
<legend>Informations professionnelles</legend>
<table width="100%">
 
<tr>
<td width="35%">Fonction<span class="asterix">*</span>:</td>  
<td colspan="2">
  <input type="radio" name="fonction" value="universitaire" checked="checked"/>Universitaire
  <input type="radio" name="fonction" value="Industriel" />Industriel
</td>
</tr>
<tr>
<td colspan="3">
  Vous &ecirc;tes adh&eacute;rent(e) &agrave; la Soci&eacute;t&eacute; Chimique de Tunisie<span class="asterix">*</span>:
</td>
</tr>
<tr>
<td></td>
<td>
<input type="radio" name="adhesion" value="Oui" checked="checked" onclick="activ_adh ()" />Oui</td>
<td width="52%">N&deg; Carte d'adh&eacute;sion:   <input type="text" name="NoAdhesion" />
</td>
 
</tr>
<tr>
<td></td>
<td colspan="2">
  <input type="radio" name="adhesion" value="Non" onclick="desactiv_adh ()" />Non Veuillez remplir le <a href="http://www.sctunisie.org/pdf/formulaire_adhesion.pdf" target="_blank">bulletin d'adh&eacute;sion &agrave; la SCT</a>
</td>
</tr>
<tr>
<td colspan="3">
  Vous d&eacute;sirez vous inscrire aux  Journ&eacute;es Nationales de Chimie  - JNC  17 <span class="asterix">*</span>:</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="radio" name="communication" value="Oui" checked="checked" onclick="activ_comm ()" />Avec: 
 
</td>
<td>
<select name="nbre_comm">
<option value="1">1 communication</option>
<option value="2">2 communications</option>
 
</select>
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2">
  <input type="radio" name="communication" value="Non" onclick="desactiv_comm ()" />Sans communication
</td>
</tr>
 
</table>
</fieldset>
 
<fieldset><legend>H&eacute;bergement &agrave; l'h&ocirc;tel</legend>
<table width="100%">
<tr>
<td colspan="2">
  Vous serez<span class="asterix">*</span>:
</td>
</tr>
<tr>
<td colspan="2">
  <input type="radio" name="hebe_hotel" value="Non accompagné" onclick="activ_bout()" checked="checked" />
  Non accompagn&eacute;(e)
</td>
</tr>
<tr>
<td width="24%">
</td>
<td>
<input type="radio" name="chambre" value="Chambre double" onclick="activ_parta ()" checked="checked" />
Chambre double
</td>
</tr>
<tr>
<td>
</td>
<td style="text-align:right">
Vous pr&eacute;f&eacute;rez partager la chambre avec: 
<input type="text" name="partage_avec" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="radio" name="chambre" value="Chambre single" onclick="desactiv_parta ()" />Chambre single
</td>
</tr>
<tr>
<td>
<input type="radio" name="hebe_hotel" value="Accompagné" onclick="desactiv_bout(); desactiv_parta()" />Accompagn&eacute;(e)
</td>
<td>
Adultes<select name="adulte">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Enfants<select name="enfant">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<!--<br />
Total &agrave; payer: <input type="text" name="total" readonly="readonly" />-->
<tr>
<td colspan="2">
  Mode de payement<span class="asterix">*</span>:
  <select name="payement">
    <option value="Espèces" selected="selected">Esp&egrave;ces</option>
    <option value="Chèque bancaire ou postal">Ch&egrave;que bancaire ou postal</option>
    <option value="Virement bancaire">Virement bancaire</option>
    <option value="Bon de commande avec chèque de garantie">Bon de commande avec chèque de garantie</option>
  </select>
</td>
</tr>
</table>

Merci d'avance.

[ABCIWEB]

Pour les inputs avec attributs checked tu peux tester avec

Code :

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

1
2
3
if ( $(elem).prop("checked") ) 
//ou 
if ( $(elem).is(":checked") )

renvoie true ou false suivant l'état

Pour trouver les valeurs et plus généralement pour les input tu peux utiliser .val()

[zarwa]

Bonjour imenfatma,

Ça dépend qu'elle type de test vous souhaitez effectuer.

Si c'est récupérer la valeur d'un input, vous devez utiliser la fonction val() en JQuery.

Pour sélectionner vos éléments HTML vous devez utiliser les sélectors. Je vous conseils de lire la documentation qui se trouve ici.

Dans votre cas si vous souhaitez récupérer la valeur de l’élément input ayant comme nom "prenom" vous devez utiliser :

Code :

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

$('input[name="prenom"]').val();

Cette dernière vous renverra la valeur contenu dans l'élément input ayant comme nom "prenom", vous pourrez alors effectuer les différents tests que vous voulez grâce au fonction traditionnelle javascript.

Si vous souhaitez simplement valider votre formulaire, vous pouvez toujours utiliser les attributs HTML5 (L'API HTML5 de contrainte de validation) en sachant que les plus vieux navigateurs qui ne connaissent pas HTML5 ne pourront le faire....