Vérification de champs dynamiques de formulaire
Bonjour,
comme je suis tout nouveau ici, je me présente : Marc Valleteau de Moulliac, parisien, 62 ans, concepteur de sites web dynamiques (passionné par le web) et également golfeur et amateur de cinéma ... mais, hélas, nul en javascript !!
De plus, après avoir appris php, mysql, j'ai reculé devant la complexité du langage ... Bref, je suis devant un pb qui paraîtra simple à un habitué, mais sur lequel je bute depuis plusieurs jours ...
Dans une formulaire, j'ai un champ select qui, en fonction du nombre affiché, fait apparaître des champs de saisie (input text). Ceux-ci apparaissent ou disparaissent selon un script javascript simple. Bon, jusque là tout baigne.
(Je contrôle facilement la saisie de deux autres champs select, par un onload=verifForm() dans la balise form).
Mais je voudrais aussi que le formulaire ne soit pas envoyé si l'un (ou plusieurs) des champs dépendants affiché(s) n'est pas rempli ou contient le texte par défaut (jj/mm/aaa).
Le champ select s'appelle 'enfants', et les autres 'enfant1', 'enfant2', etc.
Je voudrais donc faire une boucle qui permette :
1. d'afficher une alerte "merci de remplir la date de naissance de l'enfant n"
2. de renvoyer le focus sur le champ en question ...
Je ne sais pas si je suis très clair, aussi vous mets-je le code adhoc ci-dessous.
Code du formulaire (expurgé pour ne pas alourdir) :
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
|
<form name="resaForm" id="reserver" action="[(#URL_PAGE{devis_devis})]&id_article=#ID_ARTICLE" method="post" onsubmit="return verifDevis(this)">
<div class="ligne"><strong>Ville de départ</strong></div>
<div class="ligne">
<select name="villedepart" class="select-depart" id="villedepart">
<option value="">Choisissez votre ville</option>
<option value="Paris">Paris</option>
<option value="Toulouse">Toulouse</option>
</select>
</div>
<div class="ligne"><strong>Périodes disponibles</strong></div>
<div class="ligne">
<select name="periode" class="select-duree">
<B_periodes>
<option value="" selected="selected">Choisissez votre période</option>
<option value="">---------------------</option>
<option value="Periode 1">Période 1</option>
<option value="Periode 2">Période 2</option>
</select>
</div>
<div class="ligne"><strong>Voyageurs</strong></div>
<div class="ligne">
<select name="adultes" class="select-adultes">
<option value="1" >1</option>
<option value="2" selected="selected">2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
<em>Adultes : </em>
</div>
<div class="ligne">
<select name="enfants" id="nb_enfants" class="select-enfants" onchange="showEnfants(this.value);">
<option value="0" selected="selected">0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
</select>
<em>Enfants (- de 12 ans) : </em>
</div>
<div class="ligne hidden" id="cont_enfant1">
<input type="text" name="enfant1" id="enfant1" title="Veuillez saisir la date de naissance au format jj/mm/aaaa"
value="jj/mm/aaaa" size="15" onfocus="this.value=''" onfocus="this.value=''" class="select-naissance" />
</div>
<div class="ligne hidden" id="cont_enfant2">
<input type="text" name="enfant2" id="enfant2" title="Veuillez saisir la date de naissance au format jj/mm/aaaa"
value="jj/mm/aaaa" size="15" onfocus="this.value=''" onfocus="this.value=''" class="select-naissance" />
</div>
<div class="ligne hidden" id="cont_enfant3">
<input type="text" name="enfant3" id="enfant3" title="Veuillez saisir la date de naissance au format jj/mm/aaaa"
value="jj/mm/aaaa" size="15" onfocus="this.value=''" onfocus="this.value=''" class="select-naissance" />
</div>
<div class="ligne hidden" id="cont_enfant4">
<input type="text" name="enfant4" id="enfant4" title="Veuillez saisir la date de naissance au format jj/mm/aaaa"
value="jj/mm/aaaa" size="15" onfocus="this.value=''" onfocus="this.value=''" class="select-naissance" />
</div>
<div class="ligne hidden" id="cont_enfant5">
<input type="text" name="enfant5" id="enfant5" title="Veuillez saisir la date de naissance au format jj/mm/aaaa"
value="jj/mm/aaaa" size="15" onfocus="this.value=''" onfocus="this.value=''" class="select-naissance" />
</div> |
Code du script verifDevis(this)
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
|
function verifDevis(formulaire) {
if(formulaire.villedepart.value == ''){
alert('Vous n\'avez pas selectionné de ville de départ ...');
formulaire.villedepart.focus();
return false
}
if(formulaire.periode.value == ""){
alert('Vous n\'avez pas choisi de période !...');
formulaire.periode.focus();
return false
}
if (formulaire.enfants.value == "1") {
if (formulaire.enfant1.value == "jj/mm/aaaa") {
alert('Merci d\'indiquer la date de naissance de l\'enfant ...');
formulaire.enfant1.focus();
return false
}
if (formulaire.enfant1.value == "") {
alert('Merci d\'indiquer la date de naissance de l\'enfant ...');
formulaire.enfant1.focus();
return false
}
}
if (formulaire.bebes.value == "1") {
if (formulaire.bebe1.value == "jj/mm/aaaa") {
alert('Merci d\'indiquer la date de naissance de l\'enfant ...');
formulaire.enfant1.focus();
return false
}
if (formulaire.bebe1.value == "") {
alert('Merci d\'indiquer la date de naissance de l\'enfant ...');
formulaire.enfant1.focus();
return false
}
}
} |
J'ai essayé d'écrire une boucle pour remplacer le
Code:
if (formulaire.enfant.value =="1")
par un
Code:
if (formulaire.enfant.value >"0")
mais rien de ce que j'ai essayé ne veut fonctionner : pire, quand je mets mon bout de code là-dedans, plus rien ne fonctionne !!
Merci de tout coeur à celui qui pourra me donner une piste exploitable ...
Marc
