Discussion :

[Benduroy]

Bonjours,

j'ai un formulaire html dont je demande à l'utilisateur de saisir des valeurs dans au moins 4 champs obligatoirement. Quand il appuis sur le bouton enregistrer je vérifie cela en javascript, et je lui affiche un message si des champs font défaut (ça c'est la partie qui fonctionne).
Néanmoins dans le cas où tout est bien rempli mon js ne submit pas les champs.

Voici mon code:

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
<form method="post" name="monForm" id="monForm" action="index.php" />
<input type="hidden" name="page" value="new_user_form_ctrl"/>
 
<div id="bluebackground">
	<table>
		<tr>
			<td class="important">Filiales:</td> <td><select name="filiale_list" >
													<option value=''>Selectionnez...</option>
                                            <?php while($data = mysql_fetch_assoc($filiales)) { 
                                                                                                echo '<option value="'.$data['id_filiale'].'">'.$data['nom_filiale'].'</option>';
                                                                                        } ?>
                                        </select>
			</td>
		</tr>
		<tr><td></td><td>M <input type="radio" name="sexe" value="M" checked> Mme <input type="radio" name="sexe" value="Mme" ></td></tr>
		<tr><td class="important">Nom:</td>     <td><input type="text" id="name" name="nom" size="15" /></td></tr>
		<tr><td class="important">Prénom:</td>  <td><input type="text" id="surname" name="prenom" size="15" /></td></tr>
		<tr>
			<td class="important">Services:</td> <td><select name="service_list" 
			onclick="sendData('recherche_chefservice='+this.value,'ajax/ajax_chefservice.php','span_chefservice');">
                                            <option value="">Sélectionnez...</option>
											<?php while($data = mysql_fetch_assoc($services)) { 
                                                                                                echo '<option value="'.$data['id_service'].'">'.$data['nom_service'].'</option>';
                                                                                        } ?>
                                        </select>
			</td>
		</tr>
	</table>
 
    <div class="centrer"><input type="submit" name="back" value="RETOUR" /></div> 
	<div class="important"><input type="button" name="enregistrer" value="ENREGISTRER" onClick="validerForm(this.form)" /></div>
 
</div>
</form>

Code javascript :

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
<SCRIPT language="javascript">
   function validerForm(formulaire) {
		if (formulaire.filiale_list.value == '') {
			alert("Vous devez choisir une filiale pour continuer!");
			formulaire.filiale_list.focus();
			return false;
		} else if (formulaire.nom.value == '') {
			alert("Vous devez saisir un nom pour continuer!");
			formulaire.nom.focus();
			return false;
		} else if (formulaire.prenom.value == '') {
			alert("Vous devez choisir un prénom pour continuer!");
			formulaire.prenom.focus();
			return false;
		} else if (formulaire.service_list.value == '') {
			alert("Vous devez choisir un service pour continuer!");
			formulaire.service_list.focus();
			return false;
		} else {
			formulaire.submit();
			return true;
		}
   }
</SCRIPT>

Si quelqu'un a une idée...

[DrDarko]

Bonjour,

Peut être parce que ton bouton envoyer est de type button et ton bouton back est de type submit...?

Après j'ai pas regardé plus que ça.

[Benduroy]

Je viens de mettre les deux boutons de type button, aucun changement. Par contre si je les mets tout les deux de type submit, même si je n'ai pas un champs de rempli, le message d'erreur s'affiche, puis ça valide quand même quoi qu'il arrive et ce n'est pas ce que je souhaite

[Bovino]

Code :

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

onClick="validerForm(this.form)"

Il faut voir les attributs d'événements comme des fonctions anonymes.
Du coup, lorsque tu cliques sur le bouton, tu appelles, via une fonction anonyme, la fonction validerForm(), cette fonction renvoie un booléen à la fonction anonyme, le problème, c'est que cette valeur de retour, tu n'en fais rien, du coup, le formulaire est validé...

Code :

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

onClick="return validerForm(this.form)"

[SpaceFrog]

l'evenement onsubmit du form est fait pour celà:
dans la balise form

Code :

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

onclick="return validerForm(this.form)"

sans C majuscule et pour la balise script :

Code :

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

<script type="text/javascript">

[Benduroy]

Non toujours pas, ça ne valide pas quand j'envoie avec les champs correctement renseignés.

Code javascript :

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
<script type="text/javascript">
   function validerForm(formulaire) {
		if (formulaire.filiale_list.value == '') {
			alert("Vous devez choisir une filiale pour continuer!");
			formulaire.filiale_list.focus();
			return false;
		} else if (formulaire.nom.value == '') {
			alert("Vous devez saisir un nom pour continuer!");
			formulaire.nom.focus();
			return false;
		} else if (formulaire.prenom.value == '') {
			alert("Vous devez choisir un prénom pour continuer!");
			formulaire.prenom.focus();
			return false;
		} else if (formulaire.service_list.value == '') {
			alert("Vous devez choisir un service pour continuer!");
			formulaire.service_list.focus();
			return false;
		} else {
			formulaire.submit();
			return true;
		}
   }
</script>

Code html :

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

1
2
    <div class="centrer"><input type="submit" name="back" value="RETOUR" /></div> 
	<div class="important"><input type="submit" name="enregistrer" value="ENREGISTRER" onclick="return validerForm(this.form)" /></div>

Je reviens bien sur ma page, tout les champs sont effacés, et la requête ne s'est pas lancée. Alors que si j'enlève le onclick, elle se lance, j'ai testé

[SpaceFrog]

il faut peut etre reflechir à la chornologie ...

Code :

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

1
2
3
4
5
 
else {
			formulaire.submit();
			return true;
		}

pourquoi soumets tu le form ???? alors que le comportement par defaut du bouton est de soumettre le form si tu ne le contrecarres pas avec un return false ...

=>

Code :

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

1
2
3
4
else {
 
			return true;
		}

[Benduroy]

Ah oui excellent. C'était ça entre autre.
Merci