Vérification de champs dynamiques de formulaire

**markouch** · 22/11/2007, 17h16

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 :

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
 
<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&eacute;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&eacute;riodes disponibles</strong></div>
      		<div class="ligne">
      			<select name="periode" class="select-duree">
         			<B_periodes>
         			<option value="" selected="selected">Choisissez votre p&eacute;riode</option>
         			<option value="">---------------------</option>
				<option value="Periode 1">P&eacute;riode 1</option>
				<option value="Periode 2">P&eacute;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 :&nbsp;</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) :&nbsp;</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 :

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

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

 if (formulaire.enfant.value =="1")

par un

Code :

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

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

**markouch** · 22/11/2007, 18h56

Je me réponds à moi-même, après avoir longuement cherché et testé, jusqu'à réussir ce que je voulais ... Voilà le code généré, qui fonctionne bien :

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
 
	var i;
	var containerE;
	var champE;
	if (formulaire.enfants.value > "0") {
 
		for( i=1; i <= formulaire.enfants.value; i++) {
			containerE = document.getElementById('cont_enfant'+i);
			if (containerE.className = 'ligne'){
				champE = document.getElementById('enfant'+i);
				if (champE.value == "jj/mm/aaaa" || champE.value == "") {
				alert('Merci d\'indiquer la date de naissance de l\'enfant'+i+'...');
				champE.focus();
				return false
				}
			}
		}
	}

Si cela peut en intéresser ...

Cordialement à tous ...

Vérification de champs dynamiques de formulaire

JavaScript

Discussions similaires

Partager

Partager